Behandlung von Angular2 - 4 Fehlern mit verschachtelten Form Gruppen in reaktiven Formen

Question

Jungs Ich brauche Hilfe mit Angular 4 reaktiven Formen. Ich habe geschachtelte Form-Gruppen funktioniert auch gut außer Validierung. Aber meine App stürzt ab, wenn ich versuche, in meinem HTML-Markup eine Validierungskontrolle hinzuzufügen.

meine Komponente Code wie folgt aussieht:

createForm() { 
    let options: any = {}; 

    for (let option of this.annoucementOptions) { 
     options[option.title] = new FormControl(false); 
    } 

    let optionsFormGroup: FormGroup = new FormGroup(options); 

    this.annoucementForm = this.fb.group({ 
     address: this.fb.group({ 
      country: ['', [Validators.maxLength(50)]], 
      state: ['', [Validators.maxLength(50)]], 
      city: ['', [Validators.required, Validators.maxLength(50)]], 
      street: ['', [Validators.required, Validators.maxLength(50)]], 
      apartment: ['', [Validators.required, Validators.maxLength(50)]], 
     }), 
     description: this.fb.group({ 
      title: ['', [Validators.required, Validators.maxLength(80)]], 
      shortDescription: [''], 
      livingPlaces: [''], 
      room: [''], 
      options: optionsFormGroup 
     }), 
     priceBlock: this.fb.group({ 
      price: ['', [Validators.required, Validators.maxLength(80)]], 
      type: ['', [Validators.required, Validators.maxLength(80)]], 
     }), 
    }); 
} 

und dies ein Stück von meinem Template-Code ist:

<form class="form form-lg form-def" *ngIf="annoucementForm" (ngSubmit)="saveDetails(annoucementForm)" name="annoucementForm" [formGroup]="annoucementForm"> 
<div class="form-block" formGroupName="address"> 
    <h2 class="form-block-heading flag-label primary">Address</h2> 

    <ul class="row form-list"> 
     <li class="col-md-6 col-lg-4 form-list-item"> 
      <md-input-container class="d-block"> 
       <input type="text" mdInput placeholder="*Country" formControlName="country"> 
      </md-input-container> 

      <div class="form-error text-danger" 
        *ngIf="annoucementForm.get('country').touched " 
      > 
       <p *ngIf="annoucementForm.get('country').hasError('maxlength')"> 
        *This field be more than 35 characters long. 
       </p> 
      </div> 
     </li> 
    </ul> 

Answer 1

Verwenden

annoucementForm.get('address.country') 

oder

annoucementForm.get(['address', 'country']) 

statt

annoucementForm.get('country')