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 属性?像这样是强制性的..在我的情况下这是可行的..&lt;form #myForm="ngForm"&gt; &lt;mat-select name="journal_bank_id" placeholder="Bank Account" [(ngModel)]="journal.journal_bank_id" required&gt;&lt;mat-option&gt;--&lt;/mat-option&gt;&lt;mat-option *ngFor="let bank of bank_accounts | async" [value]="bank.bank_id"&gt;bank.bank_account_number &lt;/mat-option&gt;&lt;/mat-select&gt;&lt;button mat-raised-button type="submit" color="primary" (click)="save()" [disabled]='myForm.invalid'&gt;Save&lt;/button&gt; 它应该或多或少地工作。 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 绑定语法时,这对我有用。

即而不是这个

&lt;mat-select placeholder="Favorite food" matInput [ngModel] food="food" #food="ngModel" required&gt;

使用这个:

&lt;mat-select name="food" placeholder="Favorite food" [(ngModel)]="food" required&gt;

【讨论】:

双向绑定就可以了,不需要使用 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 请求处理程序提交表单不起作用

文本区域验证最大规则在 laravel 6 中不起作用

VueJS 2:vee-validate 3 - 子组件验证不起作用

Laravel Regex Match Url与JPG不起作用[重复]

当我尝试将图像上传到 Firebase 存储时,putFile 在 kotlin 中不起作用