MAT选择需要验证不起作用

Question

我有以下代码

<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>

由于我希望"选择"是必需的字段，因此在渲染表单时应禁用"提交"按钮。但是，显示表单时启用"提交"按钮。有什么问题？

Answer 1

当我(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>

Answer 2

用于Angular 5的验证使用反应性形式。请参阅此

*** 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])
 });
}
}

**** 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。

Answer 3

mat-select上所需的字段验证的唯一方法是使用反应性表单验证。只需在打字稿文件中导入各个组件：

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验证，这是我发现使其起作用的唯一方法。

Answer 4

在您最初的问题下查看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>

由于名称属性，您的food.value现在可以在提交表格时在createform.value.vood上找到。

Answer 5

这对我有用：在您的应用模块中导入ReactiveFormsModule

import { ReactiveFormsModule } from '@angular/forms';

并在@ngmodule Decorator

Answer 6

我不知道我在做什么错，但是在使用formgroup和formControl时，我无法使用Ang8 Mitaly8和多选的解决方案。我最终做了以下方法。

首先，我在垫子选择中添加了一个标签，#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>