web-dev-qa-db-ja.com

Angular 5マテリアル：ドロップダウン（選択）に必要な検証が機能していません

NgForm内にマテリアルドロップダウンがあります。必要に応じてこの選択を設定すると、横にアスタリスク*が表示されますが、ドロップダウンからオプションを選択しない場合、フォームは有効と見なされます。

<mat-form-field class="col-4 offset-1">
<mat-select placeholder="Some placeholder" [(value)]="data.name" required>
  <mat-option *ngFor="let name of names" [value]="name.value">
    name.viewValue
  </mat-option>
</mat-select>
</mat-form-field>

これは、マテリアル入力をrequiredに設定した場合に起こることとは異なり、フォームが空の場合は無効になります。

<mat-form-field class="col-4 offset-1">
 <input matInput name="dob" placeholder="Date Of Birth" [(ngModel)]="data.dob" required>
  </mat-form-field>

ReactiveFormsを使用するのではなく、テンプレート駆動型のアプローチを使用してこれを解決することを好みます（ReactiveFormsについて話しているソリューションが見つかりました）、誰でも私を助けることができますか？

注意：

同様のタイトルの question を見つけましたが、FormGroup（reactiveForms）を使用しています

私はこれにアイデアを与えるために例を入れました stackblitz

angularangular5angular-material2
5
Ahmed Elkoussy

requiredではなく、選択のoptionにselectを追加しました。次のようにします：

<mat-select placeholder="Favorite food" name="select" [(ngModel)]="select" required>
    <mat-option *ngFor="let food of foods" [value]="food.value" >
      {{ food.viewValue }}
    </mat-option>
  </mat-select>
</mat-form-field>

[〜＃〜] demo [〜＃〜]

6
Julius Dzidzevičius

優れた answer of（ゼロからヒーロー）に基づいて、コメントで言及されている2つのポイントを明確にしたいと思います。

1-ngModelではなくvalueを使用する必要があります

2-コントロールに名前を付ける必要があります

彼の功績は彼にあります。それがうまくいかない理由を見つけるのに2時間かかったので、私のような新参者にこれを明確にしたかったです。

4
Ahmed Elkoussy