web-dev-qa-db-ja.com

mat-select必要な検証が機能しない

私は次のコードを持っています

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

「選択」は必須フィールドであるため、フォームのレンダリング時に「送信」ボタンを無効にする必要があります。ただし、フォームが表示されると、「送信」ボタンが有効になります。何が問題ですか？

angular5angular2-formsangular-material2redux-form-validators
11
user3097695

これは、（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>

4
Merenzo

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検証を行うオプションがないというのは奇妙なことですが、これが機能する唯一の方法です。

2
Sri7

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>

つかいます [formGroup]およびformControlNameをHTMLフォームに追加します。

1
Sarjerao Ghadage

これは私のために働いた：あなたのアプリモジュールにReactiveFormsModuleをインポートする

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

@NgModuleデコレータに依存関係を追加します

0
Prashant K

元の質問の下の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で見つかるようになりました。

0
jna