我有以下代码
<form #createForm="ngForm">
<mat-form-field>
<mat-select placeholder="Favorite food"
matInput
[ngModel]
food="food"
#food="ngModel" required>
<mat-option *ngFor="let food of foods" [value]="food.value">
{{ food.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
</form>
<button [disabled]="!createForm.valid">submit</button>
由于我希望“选择”是必填字段,因此在呈现表单时应禁用“提交”按钮。但是,显示表单时会启用“提交”按钮。问题是什么?
在mat-select
上进行字段验证所需的唯一方法是使用反应式表单验证。只需导入typescript文件中的相应组件:
import {FormControl, Validators} from '@angular/forms';
HTML文件:
删除你的ngModel
参考
<mat-form-field>
<mat-select placeholder="Favorite food"
matInput [formControl]="foodControl"
required>
<mat-option *ngFor="let food of foods" [value]="food.value">
{{ food.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
这适用于必需的字段验证。如果你想更有可能验证,你最终会访问typescript文件中的form
。奇怪的是,没有选择进行form
验证,这是我发现使它工作的唯一方法。
当我(a)使用name
属性和(b)使用双向ngModel
绑定语法时,这适用于我。
即取而代之
<mat-select placeholder="Favorite food" matInput [ngModel] food="food" #food="ngModel" required>
用这个:
<mat-select name="food" placeholder="Favorite food" [(ngModel)]="food" required>
用于验证角度5使用反应形式。 refer this
*** componentsnet.ts *******
import { FormControl, Validators, FormBuilder, FormGroup, ReactiveFormsModule, NgForm } from '@angular/forms';
export class Test implements OnInit{
foodform:FormGroup;
constructor(){}
ngOnInit() {
// create form group of controls
this.foodform = new FormGroup({
favoriteFood: new FormControl('', [Validators.required])
});
}
}
**** Component.html ************
<form #createForm="ngForm" [formGroup]="foodform ">
<mat-form-field>
<mat-select placeholder="Favorite food"
matInput
[ngModel]
food="food"
#food="ngModel" formControlName="favoriteFood">
<mat-option *ngFor="let food of foods" [value]="food.value" >
{{ food.viewValue }}
</mat-option>
</mat-select>
<mat-error *ngIf="foodform.controls['favoriteFood'].hasError('required') && foodform.controls['favoriteFood'].pristine">
Required Message
</mat-error>
</mat-form-field>
</form>
在你的HTML格式中使用[formGroup]
和formControlName
。
在你原来的问题下看看danger89的评论。您缺少name属性。例如:
<form #createForm="ngForm" (ngSubmit)="submitFunction(createForm)">
<mat-form-field>
<mat-select
placeholder="Favorite food"
ngModel
name="food"
required
>
<mat-option *ngFor="let food of foods" [value]="food.value">
{{ food.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
<button type="submit" [disabled]="!createForm.valid">submit</button>
</form>
由于name属性,现在可以在提交表单时在createForm.value.food中找到food.value。
这对我有用:在你的app模块中导入ReactiveFormsModule
import { ReactiveFormsModule } from '@angular/forms';
并在@NgModule装饰器中添加其依赖项