mat-select 所需的验证不起作用
Posted
技术标签:
【中文标题】mat-select 所需的验证不起作用【英文标题】:mat-select required validation not working 【发布时间】:2018-09-07 19:02:27 【问题描述】:我有以下代码
<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 的 name 属性?像这样是强制性的..在我的情况下这是可行的..<form #myForm="ngForm"> <mat-select name="journal_bank_id" placeholder="Bank Account" [(ngModel)]="journal.journal_bank_id" required><mat-option>--</mat-option><mat-option *ngFor="let bank of bank_accounts | async" [value]="bank.bank_id">bank.bank_account_number </mat-option></mat-select><button mat-raised-button type="submit" color="primary" (click)="save()" [disabled]='myForm.invalid'>Save</button>
它应该或多或少地工作。 stackblitz.com/edit/angular-azgehl
【参考方案1】:
对于 Angular 5 中的验证,请使用反应形式。 refer this
*** componenet.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])
);
**** 组件.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
。
【讨论】:
我不使用响应式表单,而是使用基于模板的组件。你的回答没有解决我的问题。 更正这不是您在使用模板驱动表单时的答案。 这和我的问题一样。唯一不同的是组件文件中有更多内容。// 创建控件的表单组 this.foodform = new FormGroup( favoriteFood: new FormControl('', [Validators.required]) ); 它会正确添加*,但不会阻止启用“提交”。 这个答案间接表明模板驱动的表单在 Angular 5 中以某种方式被弃用,这是不正确的。也不解决原始问题。【参考方案2】:必填字段验证在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>
这适用于必填字段验证。如果您想更有效地进行验证,您最终将访问打字稿文件中的form
。奇怪的是没有选项可以进行form
验证,这是我发现使其工作的唯一方法。
【讨论】:
【参考方案3】:查看danger89 在您原来问题下的评论。 您缺少名称属性。 例如:
<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 属性,您的 food.value 现在可以在提交表单时在 createForm.value.food 中找到。
【讨论】:
【参考方案4】:当我 (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>
【讨论】:
双向绑定就可以了,不需要使用 name 属性来使其工作【参考方案5】:这对我有用: 在你的应用模块中导入 ReactiveFormsModule
import ReactiveFormsModule from '@angular/forms';
并在@NgModule 装饰器中添加它的依赖
【讨论】:
【参考方案6】:我不知道自己做错了什么,但在使用 FormGroup 和 FormControl 时,我无法获得使用 Ang8 + Material8 和多选的任何解决方案。我最终做了以下解决方法。
首先我在 mat-select 中添加了一个标签,#thisselect
然后我在提交按钮中测试了零长度的标签值
<form [formGroup]="bypartForm" (ngSubmit)="onSubmit()">
<mat-form-field [hideRequiredMarker]="true">
<mat-select #thisselect placeholder="Brands" formControlName="brands"
(selectionChange)="selectChanged($event)" multiple required>
<mat-option *ngFor="let brand of brandList" [value]="brand.name">brand.name</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field [hideRequiredMarker]="true">
<input matInput autocomplete="off" placeholder="Part#" formControlName="part" required>
</mat-form-field>
<div class="form-buttons">
<button mat-raised-button color="primary" type="submit" [disabled]="!bypartForm.valid || (thisselect.value != undefined && thisselect.value.length == 0)">Submit</button>
</div>
</form>
【讨论】:
以上是关于mat-select 所需的验证不起作用的主要内容,如果未能解决你的问题,请参考以下文章
ScrollTop 到所需的位置在 iPad 的情况下不起作用
使用 jQuery AJAX 向所需的 PHP POST 请求处理程序提交表单不起作用
VueJS 2:vee-validate 3 - 子组件验证不起作用