角型4でモデル駆動型で検証エラーが表示されない

Question

以下のコードを検証エラーに使用していますが、エラーメッセージは表示されません。誰も助けることができます。フォームビルダーを使用してコンポーネントにバリデータを設定しました。

私は1つのフォームグループしか使用していませんが、動作しますが、ネストフォームグループでは動作しません。

import {Component, NgModule} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 

import {ReactiveFormsModule, FormsModule, FormGroup, FormBuilder, Validators} from "@angular/forms"; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div class="login"> 
<form [formGroup]="registerForm" (ngSubmit)="dologin(form.value)"> 
<div class="form-group" formGroupName="user" id ="user"> 
    <div class="form-group"> 
     <label for="username">Username</label> 
     <input id="username" type="text" class="form-control" name="username" formControlName="username"> 

     <div [hidden]="registerForm.controls['username'].valid || registerForm.controls['username'].pristine" 
     class="alert alert-danger"> Username is required.</div> 
    </div> 
    </div> 
    <div class="form-group"> 
     <label for="password">Password</label> 
     <input id="password" type="password" class="form-control" name="password" [formControl]="registerForm.controls['password']"> 
     <div [hidden]="registerForm.controls['password'].valid || registerForm.controls['password'].pristine" 
     class="alert alert-danger"> Password is required.</div> 
    </div> 
    <button type="button" (click)="logOut([registerForm])">Check vals</button> 
    <button type="submit" [disabled]="!registerForm.valid" class="btn btn-primary">Login</button> 
</form> 
</div> 
    `, 
    providers: [FormBuilder] 
}) 
export class App { 
    name:string; 
    form: FormGroup; 
    constructor(private fb: FormBuilder) { 
    this.name = 'Angular2' 
    this.registerForm=this.fb.group({ 
     user:this.fb.group({ 
      username:['',Validators.required] 
     }), 
     password:['',Validators.required] 
    }); 
    } 

    logOut(x: any) { 
    for(var i = 0; i < x.length; ++i) { 
     console.log(x[i]); 
    } 
    } 

    dologin(stuff: any) { 
    console.log(stuff); 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule, ReactiveFormsModule ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

Answer 1

<div *ngIf="registerForm.get('user.username').hasError('required') && registerForm.get('user.username').touched" 
     class="alert alert-danger"> Username is required.</div> 

を変更し、交換してみ

<div *ngIf="registerForm.get('password').hasError('required') && registerForm.get('password').touched" 
     class="alert alert-danger"> Password is required.</div> 

Answer 2

import {Component, NgModule} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 

import {ReactiveFormsModule, FormsModule, FormGroup, FormBuilder, FormControl, Validators} from "@angular/forms"; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div class="login"> 
<form [formGroup]="registerForm" (ngSubmit)="dologin(form.value)"> 
<div class="form-group" formGroupName="user" id ="user"> 
    <div class="form-group"> 
     <label for="username">Username</label> 
     <input id="username" type="text" class="form-control" name="username" formControlName="username"> 

     <div *ngIf="registerForm.controls.user.controls.username.valid || registerForm.controls.user.controls.username.pristine" 
     class="alert alert-danger"> Username is required.</div> 
    </div> 
    </div> 
    <div class="form-group"> 
     <label for="password">Password</label> 
     <input id="password" type="password" class="form-control" name="password" formControlName="password" [formControl]="registerForm.controls.password"> 
     <div [hidden]="registerForm.controls.password.valid || registerForm.controls.password..pristine" 
     class="alert alert-danger"> Password is required.</div> 
    </div> 
    <button type="button" (click)="logOut([registerForm])">Check vals</button> 
    <button type="submit" [disabled]="!registerForm.valid" class="btn btn-primary">Login</button> 
</form> 
</div> 
    ` 
}) 
export class App { 
    name:string; 
    registerForm: FormGroup; 
    constructor(private fb: FormBuilder) { 
    this.name = 'Angular2' 
    this.registerForm=fb.group({ 
     user:fb.group({ 
      username:['',Validators.required] 
     }), 
     password:['',Validators.required] 
    }); 
    } 

    logOut(x: any) { 
    for(var i = 0; i < x.length; ++i) { 
     console.log(x[i]); 
    } 
    } 

    dologin(stuff: any) { 
    console.log(stuff); 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule, ReactiveFormsModule ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {}`enter code here` 

コンポーネントにregisterFormともネストしたformgroupを持っているとき、あなたはあなたの財産のパスに含める必要があるためこれはFormcontrol

Answer 3

インポートするフォーム変数の名前を変更しました。

registerForm.controls['username'] 

が、それは次のようになります：あなたは、パスのフォームコントロールを持っていない

registerForm.controls.user.controls.username 

ので、これはかなり長くなることができますので、あなたがこのformcontrolに該当する変数を作ると考えることができそのテンプレートはよりきれいに見えます。しかし、それはただの詳細です:)

PLUNKER

Answer 4

パスワードエラーを表示するには、次の試してください。[formGroup]=registerForm.controls['user'] とformGroupName="user"そして、あなたが検証メッセージの使用を隠そうとするとき：[hidden]="registerForm.controls['user'].controls.username.valid"の代わりに：<div [hidden]="registerForm.controls['username'].valid"

希望これはあなたを助ける:)