角4嵌套下拉

Question

我試圖添加嵌套下拉。如果我們點擊「添加城市」，它會創建另一個下拉菜單。我沒有下拉式成功。請參見下文

..component.html

<form [formGroup]="form" (ngSubmit)="onSubmit()"> 
    <select formControlName="cities"> 
    <option *ngFor="let city of myCities; let i=index" [value]='itemname' > 
     {{ city }} 
    </option> 
    </select> 
    <br> 
    <button>Submit</button> 
    <button (click)="addCity()">Add City</button> 
    <button (click)="remove(i)">Remove</button> 
</form> 

component.ts

form = new FormGroup({ 
    cities: new FormControl([null]), 
    }); 


    myCities = ['Dhaka','Dubai','Munich']; 


    get cities(): FormArray { return this.form.get('cities') as FormArray; } 

    addCity() { this.form.get('cities').push(new FormControl())} 

    remove(index){ this.form.get('cities').removeAt(index) } 

顯示錯誤波紋管：

E:/angular/nestedForm2/src/app/order-form/order-form.component.ts (21,39): Property 'push' does not exist on type 'AbstractControl'.

E:/angular/nestedForm2/src/app/order-form/order-form.component.ts (23,42): Property 'removeAt' does not exist on type 'AbstractControl'.

我已經TR以不同的方式，但仍然沒有找到任何解決方案。能否請你幫忙？

Answer 1

我找到了解決方案。

component.html：

<form [formGroup]="form" (ngSubmit)="onSubmit()"> 
    <div formArrayName="cities"> 

     <div *ngFor="let city of cities.controls; let i=index"> 

     <select [formControlName]="i"> 

      <option *ngFor="let itemname of myCities" [value]='itemname' > 
       {{ itemname }} 
      </option> 

     </select> 

     </div> 

    </div> 

    <br> 

    <button>Submit</button> 
    </form> 

    <br> 

    <button (click)="addCity()">Add City</button> 
    <button (click)="remove(i)">Remove City</button> 

component.ts：

import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms'; 
import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-order-form', 
    templateUrl: './order-form.component.html', 
    styleUrls: ['./order-form.component.css'] 
}) 
export class OrderFormComponent implements OnInit { 

    form = new FormGroup({ 
    cities: new FormArray([ 
     new FormControl([null]), 
    ]), 
    }); 



    myCities = ['Dhaka','Dubai','Munich']; 


    get cities(): FormArray { return this.form.get('cities') as FormArray; } 

    addCity() { this.cities.push(new FormControl()); } 

    remove(index) { (this.form.get('cities') as FormArray).removeAt(index) } 

    constructor() { } 

    ngOnInit() { 
    } 

    onSubmit() { 
    console.log(this.cities.value); // ['SF', 'NY'] 
    console.log(this.form.value); // { cities: ['SF', 'NY'] } 
    } 

    setPreset() { this.cities.patchValue(['LA', 'MTV']); } 


} 

Answer 2

要解決您的錯誤，您需要將AbstractControl轉換爲其子類FormArray，其中push和removeAt已定義。

(this.form.get('cities') as FormArray).push(new FormControl()) 
(this.form.get('cities') as FormArray).removeAt(index) 

你必須這樣做，因爲打字稿不能確定的form.get('cities')確切類型，因爲你通過提供字符串訪問它。只有您作爲開發人員知道，根據您表單中的數據結構，form.get('cities')將包含FormArray。