角度4のネストされたドロップダウン

Question

ネストされたドロップダウンを追加しようとしています。 「都市を追加」をクリックすると、別のドロップダウンが作成されます。私はドロップダウンなしで成功しました。私はTRを持って

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

：怒鳴る

..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) } 

を参照してください。いろいろなやり方で答えられましたが、それでも解決策は見つかりませんでした。助けてもらえますか？

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が含まれていることがわかります。