angular2 Formulare Validierung Fehlermeldung

Question

ich bin neu in angular2 und ich möchte ein Formular zum Einfügen von Daten mein Problem ist, wenn ich klicke erstellen zeigt "Browser Sync getrennt" auch zunächst die beiden Felder Name und Adresse zeigen die Werte, die ich gab sie aber Postleitzahl doesn't.and schließlich gibt es ein Fehler-Fehler: „Kann nicht finden Kontrolle mit Pfad:‚Adresse -> Adresse‘ hier ist mein Code component.html

<div class="container"> 
<h3>Add user:</h3> 
<form [formGroup]="myForm" novalidate (ngSubmit)="Create(myForm.value, myForm.valid)"> 
<ul> 
    <div class="form-group"> 
     <label for="name">name:</label> <input type="text" class="form-control" formControlName="name"><br/><small [hidden]="myForm.controls.name.valid || (myForm.controls.name.pristine && !submitted)" class="text-danger"> 
     name is required. 
      </small> 
      </div> 

<div class="form-group" formGroupName="adress"> 
     <label for="">adress</label> 
     <input type="text" class="form-control" formControlName="street"> 
     <small [hidden]="myForm.controls.adress.controls.street.valid || (myForm.controls.adress.controls.street.pristine && !submitted)" class="text-danger"> 
      street required 
      </small> 


<div class="form-group" formGroupName="adress"> 
     <label for="">postcode</label> 
     <input type="text" class="form-control" formControlName="postcode"> 
    </div> 

<button class="btn btn-default" (click)="CreateVersion()">create</button> 
     </div> 

    </ul> 
    </form> 
    </div> 

component.ts

import { Component ,OnInit} from '@angular/core'; 
import {Service} from '../services/service.component'; 
import { FormsModule,FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms'; 
import {Observable} from 'rxjs/Rx'; 
import { User } from './user.interface'; 


@Component({ 
moduleId: module.id, 
selector: 'version', 
templateUrl:'./version.component.html', 
styleUrls:['./version.component.css'] 
}) 

export class VersionComponent implements OnInit{ 

public myForm: FormGroup; 


constructor(){}; 

    ngOnInit() { 

     this.myForm = new FormGroup({ 
      name: new FormControl('', [<any>Validators.required, <any>Validators.minLength(5)]), 
      adress: new FormGroup({ 
       street: new FormControl('', <any>Validators.required), 
       postcode  : new FormControl('') 
      }) 
     }); 

    const people = { 
       name: 'Jae', 
       adress: { 
       street: 'High street', 
       postcode: '94043' 
      } 
     }; 

     (<FormGroup>this.myForm) 
      .setValue(people, { onlySelf: true }); 
} 
    Create(conf: User, isValid: boolean) { 
     this.submitted = true; 
     console.log(model, isValid); 
    } 
} 

Benutzer

export interface User { 
name: string; 
    adress?: { 
    street?: string; 
    postcode?: string; 
    } 
    } 

Answer 1

Ich denke, es ist, weil Sie Ihre Postleitzahl mit formGroupName zweimal gewickelt haben, um Ihre HTML so sein sollte: -

<div class="container"> 
    <h3>Add user:</h3> 
    <form [formGroup]="myForm" novalidate (ngSubmit)="Create(myForm.value, myForm.valid)"> 
     <ul> 
      <div class="form-group"> 
       <label for="name">name:</label> <input type="text" class="form-control" formControlName="name"><br/> 
       <small [hidden]="myForm.controls.name.valid || (myForm.controls.name.pristine && !submitted)" 
         class="text-danger"> 
        name is required. 
       </small> 
      </div> 

      <div class="form-group" formGroupName="adress"> 
       <label for="">adress</label> 
       <input type="text" class="form-control" formControlName="street"> 
       <small [hidden]="myForm.controls.adress.controls.street.valid || (myForm.controls.adress.controls.street.pristine && !submitted)" 
         class="text-danger"> 
        street required 
       </small> 

       <label for="">postcode</label> 
       <input type="text" class="form-control" formControlName="postcode"> 

       <button class="btn btn-default" (click)="CreateVersion()">create</button> 
      </div> 

     </ul> 
    </form> 
</div>