Блог

Главная - Вопросы по программированию - Кнопка включения пользовательского ввода текста Angular 7

Кнопка включения пользовательского ввода текста Angular 7

#angular

#angular

Вопрос:

Здесь я использую реактивные формы для привязки данных.Я столкнулся с некоторой проблемой при отключении и включении кнопки.

На самом деле, я изначально устанавливаю некоторое значение для текстового поля.

Теперь я хочу, чтобы кнопка обновления была отключена, пока пользователь что-то не введет. Это похоже на обновление строки в таблице.

   this.firstName= "Angular"
    this.newform = this.fb.group({
        FirstName: [this.firstName, [Validators.required, Validators.minLength(1)]],
    });



<form [formGroup]="newform" >
        <mat-form-field appearance="outline" fxFlex="100%">
               <mat-label>Name</mat-label>
                 <input matInput placeholder="" formControlName="FirstName" type="text" required>
        </mat-form-field>
       <button class="btn" (click)= "onSubmit()" mat-raised-button color="primary" [disabled]="!FirstName" >Update</button>
</form>

Комментарии:

1. Почему вы проверяете FirstName ?. Сделайте [disabled]="!newform?.get('dataSource').value " вместо этого.

2. Во-первых: вы должны установить значение placeholder not для текста, и вы должны отключить кнопку для новой формы. Если новая форма недопустима, отключите кнопку.

Ответ №1:

Вы можете создать средство получения в своем компоненте

 get hasFirstName():boolean {    
  return !!this.newform.get('dataSource').value
}

и затем в вашем шаблоне добавьте отключенный ввод вашей кнопки:

 [disabled]='!hasFirstName'

надеюсь, это поможет

Комментарии:

1. Не повезло.. Можете ли вы вернуться к коду, в который я внес пару изменений

2. Как и предлагал @Sachin Jagtap, поскольку вы получили подтверждение для вашего элемента управления формой, который будет контролировать действительность всей вашей формы, вы можете включить / отключить кнопку с проверкой достоверности [отключено] =’newform.invalid’

3. Изначально я привязываю некоторое значение к входным данным, поданным при загрузке компонента. Даже если я установлю [disabled] =’newform.invalid’, кнопка будет включена, потому что внутри нее есть значение.

4. Это похоже на операцию обновления, у которой уже есть значения. Если пользователь хочет обновить или отредактировать тот же текст, кнопка должна включить

5. Тогда, вероятно, вы захотите использовать dirty или touched свойства вместо invalid . Проверьте это angular.io/guide/form-validation#why-check-dirty-and-touched и попробуйте [disabled]='newform.dirty' или [disabled]='newform.touched'