我在同一行中使用 select 和 input 组件。在这里,仅在从中选择了某些内容后,我才启用 input 字段>选择组件,如下图所示。
下面是代码。
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的副本,但是针对该问题给出的答案对我不起作用。