2017-06-15 10 views
1

私は私のフォームフィールドを検証したいが、私はこのように、内部にformgroupあります反応的なフォームグループ検証にどのようにアクセスできますか?

<form novalidate (ngSubmit)="onSubmit(user)" [formGroup]="user"> 
     <label> 
     <span>Full name</span> 
     <input type="text" placeholder="Name" formControlName="name"> 
     </label> 
     <div class="error" *ngIf="!user.controls.name.valid && user.controls.name.touched"> 
     Name is required 
     </div> 
     <div formGroupName="account"> 
     <label> 
      <span>Email address</span> 
      <input type="email" placeholder="Email" formControlName="email"> 
     </label> 
     <div 
      class="error" 
      *ngIf="!user.controls.address.email.valid"> 
      Email is required 
     </div> 
     <button type="submit" [disabled]="user.invalid">Sign up</button> 
    </form> 

が、電子メールのフィールドで、それは私がその場あれば得ることができますどのようにこの

!user.controls.address.email.valid 

が動作していないが有効であるかどうか、メッセージを表示しませんか?

+1

が、それはすべきではない。この(HTML)のようになる

this.UserForm = this.fb.group({ id: [this.userobj.id], addresses: this.fb.group({ street: [this.addrssobj.street, Validators.required], }) }); 

だろうとし 'user.controls.account.email.valid' ? ( 'address'ではなく' account')? – developer033

答えて

0

このようにしてみ構文:

user.get('account.email').valid 

が、私はここに完全な例があります:角度:2:https://github.com/DeborahK/Angular2-ReactiveFormsは、これは私のPluralsightのコースからのコードであるリアクティブフォーム。

+0

なぜこれが投票されたのですか?これはこの質問に対する正解ではありませんか? – DeborahK

+0

これはdocs:

ストリートの値と非常によく似ています:{{heroForm.get( 'address.street')。value}}

'ここの参照:https://angular.io/guide/反応型 – DeborahK

0

私の構造は、マイaddresses.streetの検証が

<div formGroupName="addresses"> 
      <div> 
       <label class="center-block"> Street: </label> 
       <input type="text" class="form-group" formControlName="street" required> 
       <div *ngIf="UserForm.get('addresses').get('street').hasError('required') && UserForm.get('addresses').get('street').touched" class="text-danger"> 
        Street is required 
       </div> 
      </div> 
関連する問題