禁用输入组件时发出警告

时间:2018-10-01 06:39:23

标签: angular angular-material angular-forms

我在同一行中使用 select input 组件。在这里,仅在从中选择了某些内容后,我才启用 input 字段>选择组件,如下图所示。

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)
            });

我知道这是该question的副本,但是针对该问题给出的答案对我不起作用。

0 个答案:

没有答案