angular2表單驗證錯誤消息

Question

我是新的angular2，我想要插入數據的表單我的問題是當我點擊創建它顯示「瀏覽器同步斷開」也最初兩個字段的名稱和地址顯示我給的值他們，但郵編doesn't.and終於有錯誤錯誤：「無法找到路徑控制： 'ADRESS - > ADRESS' 這裏是我的代碼 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); 
    } 
} 

用戶

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

Answer 1

我想這是因爲你已經有formGroupName包裹你的郵編兩次，你的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> 

       <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>