web-dev-qa-db-ja.com

ドロップダウンのデフォルト値をAngular 6に設定します

DropDownにサービスを使用して入力しています。サービスは、キーと値のペアの単純な配列を返します。

TypeScript：

public initializeForm(): void {
        this.form = this.fb.group({
            supplierId: ["", [Validators.required]],
            username: ["", Validators.required],
            credentials: ["", [Validators.required]],
            rating: [""]
        })
    }


this.adminService.getSuppliers({ active: "true" }).subscribe(res => {
    this.suppliers = res;
})

HTML：

<select class="form-control" formControlName="supplierId">
     <option>Select Supplier</option>
     <option *ngFor="let s of suppliers" [value]="s.supplierId">{{s.supplierName}}</option>
</select>

下の画像を見るとわかるように、デフォルトのオプションは、ページの読み込み時に選択したオプションとして設定されていません。シンプルなHTMLと同じように、ページの読み込み時にデフォルトのオプションを選択し、ドロップダウンでデフォルトのオプションを選択してページを送信しようとすると、必須フィールドの検証が発生します

enter image description here

更新：
デフォルトのオプション値を0に設定すると、必要な検証がサポートされず、デフォルトのオプションを選択した場合は有効と見なされます

angulardropdownangular7
2
Ubiquitous Developers
<select class="form-control" [(ngModel)]="someList.key" name="key"  #key="ngModel" required>
     <option value="undefined" selected disabled>Select option</option>
     <option *ngFor="let data of someList" value="{{data.key}}">{{data.key}</option>
 </select>

私のために働いた！

0
Abid Hussain

以下のコードをcomponent.htmlファイルに含めます

  <option [value] = "defaultValue">0:(optional_value)</option>

以下のコードをcomponent.tsファイルに含めます。

this.myFormGroup.setValue({
supplierId: defaultValue, 
});
0
Shubham

これを試して、私のために働いた。

<select class="form-control" formControlName="supplierId">
  <option [ngValue]="selected" selected disabled>Select Supplier</option>
 <option *ngFor="llet s of suppliers" [ngValue]="s.supplierId">{{s.supplierName}} 
</option>
0
Chris

デフォルトオプションのデフォルト値は0にすることができます。 （0は例を突き出し、デフォルト値はどれでもかまいません）

<option value="0">Select Supplier</option>

ドロップダウンのフォームコントロールを作成したら、デフォルト値で初期化します。

// wharever your form name is, this is just an example
this.form = this._formBuilder.group({  
    .....
    supplierId: [0]  // initialize the control with the default value
    ....
})
0
xyz