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>

因为我想要＆＃34;选择＆＃34;是必填字段，＆＃34;提交＆＃34;呈现表单时应禁用按钮。然而，＆＃34;提交＆＃34;显示表单时启用按钮。有什么问题？

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

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验证，这是我发现使它运行的唯一方法。

Answer 3

用于角度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。

Answer 4

在你原来的问题下看看danger89的评论。您缺少name属性。 E.g：

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

Answer 5

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

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

并将其依赖项添加到@NgModule装饰器中

Answer 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所需的验证不起作用

6 个答案: