入力ボックスと選択ボックスに値が入力されないのはなぜですか？

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（。How to set the select element's value of a dynamically created form in angular2このデモアプリはまた、MD-チップのデモが起こったが、私はこの質問に記載されている問題を解決するためには至っていません） 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は、option要素の* 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 ] 
    }); 
    }