我有一个使用Angular Material表单字段进行错误处理的简单2输入表单。我在每个输入字段上都有一个FormControl。如果没有为这些字段输入任何值,则错误将正确显示。
但是,即使字段均为空,也永远不会禁用提交按钮。
有人可以看到问题所在吗?
这是我的HTML
<form class="add-dialog-form" (ngSubmit)="onAddField()" #addField="ngForm">
<mat-form-field>
<input matInput placeholder="Enter name" [formControl]="name" required name="name">
<mat-error *ngIf="name.invalid">{{getNameErrorMessage()}}</mat-error>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Enter value" [formControl]="value" required name="value">
<mat-error *ngIf="value.invalid">{{getValueErrorMessage()}}</mat-error>
</mat-form-field>
<div mat-dialog-actions class="dialog-button-align">
<button mat-button (click)="onCancel()">Cancel</button>
<button mat-button type="submit" [disabled]="!addField.form.valid">Add Field</button>
</div>
</form>
根据Angular Material的示例,这是我如何在组件中定义FormControl及其错误消息处理的方法:
name = new FormControl('', [Validators.required]);
value = new FormControl('', [Validators.required]);
getNameErrorMessage() {
return this.name.hasError('required') ? 'You must enter a value' : '';
}
getValueErrorMessage() {
return this.value.hasError('required') ? 'You must enter a value' : '';
}