爲什麼輸入和選擇框在他們的價值觀

Question

我有一個表格填寫不，創建使用嵌套，即顯示了一個電話號碼和一個選擇的輸入選擇的電話號碼的類型。最初，我有一套我正在嘗試賦予formGroup創建的值。但是，當選擇框獲得選項時，它不會選擇預定義的值。輸入框也不會收到預定義的值。

在app.component.ts:57，我正在採取我的預定義值的數組並分別解析它們並調用addPhoneForm方法。

的addPhoneForm方法還利用了initPhoneForm方法。這些，攜手合作，共創手機形式，可以對app.component.html 33線可以看出。

我想是不是被填寫的原因是因爲我也有我的PhoneDetailComponent構造函數中執行以下代碼：

this.phoneForm = this.formBuilder.group({ 
    phoneNumber: new FormControl(), 
    phoneType: new FormControl() 
}) 

但是，如果沒有的代碼位，我得到一個錯誤，指出formGroup預期一個FormGroup。

這裏是我工作的plnkr。 http://plnkr.co/edit/qv1BX7WtpYhw5B92SuoC?p=preview

- 代碼塊 -

- 電話-detail.component.ts

export class PhoneDetailComponent { 

    phoneTypes: EnumProperty[] = []; 
    phoneForm: FormGroup; 

    @Input('group') 
    @Output() rawChange: EventEmitter<string> = new EventEmitter<string>(); 


    constructor(private phoneTypeService: PhoneTypeService, 
       private formBuilder: FormBuilder) { 
     this.getPhoneTypes(); 
     this.phoneForm = this.formBuilder.group({ 
     phoneNumber: new FormControl(), 
     phoneType: new FormControl() 
     }) 
    } 

    private getPhoneTypes() { 
     this.phoneTypeService.get() 
     .then(phoneTypes => { 
      this.phoneTypes = phoneTypes; 
     }) 
    } 

} 

- app.component.html：31-36

<div formArrayName="phones"> 
    <div *ngFor="let phone of updateProfileForm.controls.phones.controls; let i=index"> 
     <phone [group]="updateProfileForm.controls.phones.controls[i]"></phone> 
    </div> 
    </div> 
    <a (click)="addPhoneForm()">+ Add another phone number</a> 

- - app.component.ts（僅限相關部分）

export class AppComponent { 

    private version: any; 
    updateProfileForm: FormGroup; 

    phoneNumbers: PhoneModel[] = [ 
    { phoneNumber: "843-555-5849", type: "sms" }, 
    { phoneNumber: "756-555-7643", type: "home"}, 
    { phoneNumber: "395-555-9324", type: "tty" }, 
    { phoneNumber: "621-555-2690", type: "sms" } 
    ] 

    private phoneValidator = Validators.compose([ 
    Validators.minLength(7), 
    Validators.maxLength(16), 
    Validators.pattern(/^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/) ]); 

    constructor(http: Http, 
       private formBuilder: FormBuilder) { 
    // Display the currently used Material 2 version. 
    this.version = http 
     .get('https://api.github.com/repos/angular/material2-builds/commits/HEAD') 
     .map(res => res.json()) 

     this.updateProfileForm = this.formBuilder.group({ 
     personNames: ['', []], 
     phones: this.formBuilder.array([]) 
     }); 

     console.log("Loading phones"); 
     this.phoneNumbers.forEach(p => this.addPhoneForm(p)); 
    } 

    private addPhoneForm(p?: PhoneModel) { 
    if (!p) { 
     p.phoneNumber = ""; 
     p.type = PHONE_TYPES[0]; 
    } 

    const control = <FormArray>this.updateProfileForm.controls['phones']; 
    const phnCtrl = this.initPhoneForm(p); 

    console.log(p); 

    control.push(phnCtrl); 
    } 

    private initPhoneForm(phoneModel: PhoneModel) { 
    console.log(phoneModel); 
    return this.formBuilder.group({ 
     phoneNumber: [ phoneModel.phoneNumber, this.phoneValidator ], 
     phoneType: [ phoneModel.type, [] ] 
    }); 
    } 
} 

Answer 1

我終於明白了。首先，在PhoneDetailComponent類中，我們不需要FormBuilder。它只是混淆了事情。更特別的是，它出現的原因是因爲有一個令人困惑的錯誤消息，它非常有幫助地表明我添加了它。問題不是FormBuilder，而是我發送到PDC類的屬性不匹配。

工作的結果是在這裏：http://plnkr.co/edit/qv1BX7WtpYhw5B92SuoC?p=preview

（該演示應用程序也有一個MD-芯片演示去，我還沒有解決它在此提到的問題：How to set the select element's value of a dynamically created form in angular2）

這裏是如何PhoneDetailComponent類應該看起來如下：

export class PhoneDetailComponent { 

    @Input('group') 
    phoneForm: FormGroup; 
    phoneTypes: EnumProperty[]; 

    constructor(private phoneTypeService: PhoneTypeService) { 
     this.getTypes(); 
    } 

    getTypes() { 
     this.phoneTypeService.get() 
     .then(phoneTypes => { 
      this.phoneTypes = phoneTypes; 
     }); 
     } 
} 

壞我......我沒有發佈phone-detail.component.html相關的代碼。但我可能有一個錯誤。這是html應該看起來的樣子。請注意phoneTypes是選項元素的* ngFor的一部分。我有這個正確的。我可能有錯的是formControlNames。

<div [formGroup]="phoneForm"> 
    <div class="form-group col-xs-6"> 
     <md-input-container> 
      <input mdInput 
        type="text" 
        placeholder="Phone" 
        formControlName="phoneNumber" 
        (rawChange)="rawPhone=$event" 
        [attr.maxlength]="14" 
      > 
      <md-hint *ngIf="phoneForm.controls['phoneNumber'].hasError('required') && phoneForm.controls['phoneNumber'].touched" 
        class="text-danger"> 
       Phone number is required 
      </md-hint> 
      <md-hint *ngIf="phoneForm.controls['phoneNumber'].hasError('minlength') && phoneForm.controls['phoneNumber'].touched" 
        class="text-danger"> 
       Phone number is to be 10 numbers long 
      </md-hint> 
     </md-input-container> 
    </div> 
    <div class="form-group col-xs-6"> 
     <label>Phone Type</label> 
     <select class="form-control" formControlName="phoneType"> 
      <option *ngFor="let type of phoneTypes" 
        value="{{type.code}}" 
        title="{{type.description}}"> 
       {{type.name}} 
      </option> 
     </select> 
    </div> 
</div> 

app.component.ts文件是我初始化手機組件的地方。確保將formControlNames與您在組中設置的內容進行匹配。

private addPhoneForm(p?: PhoneModel) { 
    const control = <FormArray>this.updateProfileForm.controls['phones']; 
    const phnCtrl = this.initPhoneForm(p); 

    control.push(phnCtrl); 
    } 

    private initPhoneForm(phoneModel?: PhoneModel) { 
    let pModel: PhoneModel = { 
     phoneNumber: "", 
     type: PHONE_TYPES[0] 
    } 

    if (phoneModel) { 
     pModel = phoneModel; 
    } 

    return this.formBuilder.group({ 
     phoneNumber: [ pModel.phoneNumber, this.phoneValidator ], 
     phoneType: [ pModel.type ] 
    }); 
    }