Angular2 - 嵌套表單元素

我正在關注這個示例：http://plnkr.co/edit/hQ6RtzCfPosfQl4HlbZQ?p=preview來動態添加和刪除表單元素。Angular2 - 嵌套表單元素

html：在這個文件中eventForm.controls.filters給出了一個標識符'filters'沒有被定義。 __type不包含此類成員。 FormGroup消息的屬性控件，儘管代碼有效，並且選擇不是獨立的。選擇一個級別填充所有級別選擇。

<table class="example-full-width" cellspacing="0" formArrayname="filters" *ngFor="let filters of eventForm.controls.filters.controls; let i=index"> 
    <span>Address {{i + 1}}</span> 
    <span *ngIf="eventForm.controls.filters.controls.length > 1" (click)="removeFilters(i)">x</span> 
    <tr> 
    <td> 
     <md-select [(ngModel)]="filterUserOcc" [ngModelOptions]="{standalone: true}" placeholder="Occupation" (ngModelChange)="filterUserOccupation()"> 
     <md-option [value]="null">Occupation</md-option> 
     <md-option *ngFor="let occupation of occupations | async" [value]="occupation.occupation"> 
      {{ occupation.occupation }} 
     </md-option> 
     </md-select> 
    </td> 
    </tr> 
    <tr> 
    <td> 
     <md-select [(ngModel)]="filterUserLvl" [ngModelOptions]="{standalone: true}" placeholder="Level" (ngModelChange)="filterUserLevel()"> 
     <md-option [value]="null">Level</md-option> 
     <md-option *ngFor="let level of levels | async" [value]="level.level"> 
      {{ level.level }} 
     </md-option> 
     </md-select> 
    </td> 
    </tr> 
</table>

app.module.ts

... 
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
... 


imports: [ 
... 
    ReactiveFormsModule, 
... 
    ],

component.ts

... 
import { FormGroup, FormControl, FormArray, FormBuilder, Validators } from '@angular/forms'; 
... 

export class NewEventComponent implements OnInit { 

    eventForm: FormGroup; 
... 


    constructor(
... 
    private formBuilder: FormBuilder, 
... 
) { 
... 
    } 

ngOnInit() { 
    this.eventForm = this.formBuilder.group({ 
... 
     filters: this.formBuilder.array([ 
     this.initFilters() 
     ]) 
    }); 

    } 

initFilters() { 
    return this.formBuilder.group({ 
     level: ['', Validators.required], 
     occupation: [''] 
    }); 
    } 

    addFilters() { 
    const control = <FormArray>this.eventForm.controls['filters']; 
    control.push(this.initFilters()); 
    } 

    removeFilters(i: number) { 
    const control = <FormArray>this.eventForm.controls['filters']; 
    control.removeAt(i); 
    }

來源

2017-06-22 Ciprian

這是因爲你使用雙向結合使用，例如用於水平只是一個變量 ，即[(ngModel)]="filterUserLvl"，所以當您進行更改時，這意味着您的所有level在表單中具有相同的值。

使用反應形式時，高度不鼓勵雙向綁定，而是使用表單控件代替ngModel。

也注意到你失蹤formGroupName爲每個表單組的數組內，所以我修改了它..

<div formArrayName="filters"> 
    <table *ngFor="let filters of eventForm.controls.filters.controls; let i=index" 
     [formGroupName]="i"> 
....

，然後就刪除您模板的ngModel和ngModelChange和正常工作！

似乎你希望在更改select時觸發更改事件，因爲您可以傳遞實際的窗體控件。

DEMO

來源

2017-06-22 22:39:05 Alex

謝謝。我會嘗試一下，看看它是如何工作的。 – Ciprian

*「使用反應形式時，雙向綁定是非常不鼓勵的，表單控件可以用來代替ngModel。」*的確，我同意你的意見，但直到今天，我還是無法在文檔或任何地方找到它。你是否？ – developer033

@ developer033我其實是在想從我的答案中編輯出來，但我忘了：P只是注意到使用雙向綁定通常會以災難性結果結束，因爲您可能有：D但是您是對的，我不應該我沒有證明：P我完全沒有發現任何說不應該一起使用的東西。我發現的最接近的東西就是解釋爲什麼ngModel不包含在reactiveforms模塊中。 – Alex

Angular2 - 嵌套表單元素

回答

相關問題