Предупреждение при отключении компонента ввода - PullRequest
Новая
       7

Предупреждение при отключении компонента ввода

0 голосов
/ 01 октября 2018

Я использую select и input компоненты в одной строке. Здесь я сделал поле input активным только после выбора чего-либо из select компонент, как показано на рисунке ниже.

enter image description here

Ниже приведен код.

HTML 

      <mat-form-field class="id-name">
         <mat-select placeholder="ID Card" (ngModelChange)="onChange($event)" formControlName="IdProof">
            <mat-option *ngFor="let id of  idProofs" [value]="id.value">
                {{id.viewValue}}
            </mat-option>
         </mat-select>
      </mat-form-field>

      <mat-form-field class="id-number">
        <input formControlName="idNum" matInput required>
        <mat-error *ngIf="editStaffForm.get('idNum').invalid && (editStaffForm.get('idNum').dirty || editStaffForm.get('idNum').touched)">
          Please enter id card number
        </mat-error>
      </mat-form-field>

TS 

  public ngOnInit(): void {
      this.editStaffForm = this.fb.group({
        IdProof: null,
        idNum: [null, [Validators.required]],
     });
   this.onChange(0);
   }

   public onChange(data: any): void {
     if (data) {
      this.editStaffForm.get('idNum').enable();
        } 
     else {
      this.editStaffForm.get('idNum').disable();
        }
   }

Здесь я получаю это предупреждение в консоли браузера. 

      It looks like you're using the disabled attribute with a reactive form 
       directive. If you set disabled to true
         when you set up this control in your component class, the disabled 
      attribute will actually be set in the DOM for
      you. We recommend using this approach to avoid 'changed after checked' 
        errors.

     Example: 
          form = new FormGroup({
             first: new FormControl({value: 'Nancy', disabled: true}, 
                Validators.required),
               last: new FormControl('Drew', Validators.required)
            });

Я знаю, что это дубликатэто вопрос , но ответы на этот вопрос мне не помогли.

...