Warum die Eingabe- und Auswahlfelder ihre Werte nicht ausfüllen

Question

Ich habe ein Formular, das mit Verschachtelung erstellt wurde, das eine Eingabe mit einer Telefonnummer und eine Auswahl zeigt, um den Typ der Telefonnummer auszuwählen. Anfangs habe ich eine Reihe von Werten, die ich beim Erstellen der FormGroup zuweisen möchte. Aber während die Auswahlfelder ihre Optionen erhalten, wird der vordefinierte Wert nicht ausgewählt. Auch die Eingabebox erhält ihren vordefinierten Wert nicht.

In app.component.ts:57 nehme ich meine Reihe vordefinierter Werte und analysiere sie einzeln und rufe die Methode addPhoneForm auf.

Die Methode addPhoneForm verwendet auch die initPhoneForm Methode. Diese zusammen erstellen das Telefonformular, das in Zeile 33 von app.component.html zu sehen ist.

Ich denke, der Grund, es ist nicht zu werden ausgefüllt, weil ich auch den folgenden Code in meinem PhoneDetailComponent Konstruktor Durchführung bin:

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

Aber ohne dieses Stück Code, erhalte ich eine Fehlermeldung, dass formGroup erwartet eine Formulargruppe.

Hier ist der PLNKR von dem, woran ich arbeite. http://plnkr.co/edit/qv1BX7WtpYhw5B92SuoC?p=preview

- Codeblock -

- Telefon 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 (nur relevante Teile)

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

Ich habe es endlich herausgefunden. Zunächst benötigen wir in der PhoneDetailComponent-Klasse den FormBuilder nicht. Es verwirrt nur Dinge. Vor allem war der Grund, warum es da war, eine verwirrende Fehlermeldung, die so hilfreich darauf hinwies, dass ich sie hinzufüge. Das Problem war nicht der FormBuilder, aber die Eigenschaft stimmt nicht überein zwischen dem, was ich an die PDC-Klasse gesendet habe.

Das Arbeitsergebnis ist hier: http://plnkr.co/edit/qv1BX7WtpYhw5B92SuoC?p=preview

(. Diese Demo-Anwendung ist auch ein md-Chip-Demo geht ich habe noch das Problem zu lösen, die in dieser Frage beschrieben wird: How to set the select element's value of a dynamically created form in angular2)

Hier ist, wie die PhoneDetailComponent Klasse aussehen soll:

export class PhoneDetailComponent { 

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

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

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

Bad mir ... ich habe nicht das Telefon-detail.component.html entsprechenden Code schreiben. Aber ich habe vielleicht einen Fehler gemacht. Hier ist, wie die HTML aussehen soll. Beachten Sie, dass phoneTypes Teil der * ngFor des Optionselementes ist. Ich hatte das richtig. Was ich vielleicht falsch gemacht habe, waren die 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> 

Die app.component.ts Datei ist, wo ich die Telefon Komponenten initialisieren. Stellen Sie sicher, dass die formControlNames mit denen übereinstimmen, die Sie in der Gruppe festgelegt haben.

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 ] 
    }); 
    }