Angular 4 中的模型驱动表单未显示验证错误

Question

我正在使用以下代码来验证错误，但没有看到任何错误消息。谁能帮忙。我已经使用 Form builder 在组件中设置了验证器。

当我只使用一种形式 - 组时它可以工作，但不能使用嵌套形式 - 组。

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

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`

修改组件中的form变量名为registerForm，同时导入Formcontrol

Answer 2

这是因为当您有一个嵌套的表单组时，您需要将它包含到您的属性路径中。您没有带有路径的表单控件：

registerForm.controls['username']

但应该是：

registerForm.controls.user.controls.username

这可能会变得相当长，所以你可以考虑制作一个对应于这个表单控件的变量，这样模板看起来会更干净。但这只是一个细节:)

PLUNKER

Answer 3

请尝试以下更改

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

尝试用 [formGroup]=registerForm.controls['user'] 替换：formGroupName="user" 当您尝试隐藏验证消息时，请使用：[hidden]="registerForm.controls['user'].controls.username.valid" 而不是：<div [hidden]="registerForm.controls['username'].valid"

希望这对您有所帮助:)

Angular 4 中的模型驱动表单未显示验证错误

Validation errors not shown with model driven forms in Angular 4

angular2-forms

angular