Angular 反应式验证

Question

我是 angular 的新手，我想知道 angular 6.0 中的反应式验证是如何工作的，我正在尝试进行过去 2 周的验证，有人可以帮我做吗验证？并教我怎么做。

非常感谢您的帮助，谢谢 :)

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'AngularProject';

  constructor(private fb:FormBuilder) 
  {}
  profileForm : FormGroup;
  submitted = false;
  ngOnInit(): void {
        this.profileForm= this.fb.group({
          firstName:['', [Validators.required]],
          EmailMe:['',[Validators.required]]
        });
  }

  onSubmit():void
  {
    this.submitted = true;
    if (this.profileForm.invalid) {
      return;
  }
    console.log(this.profileForm.value);
    alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.profileForm.value))
  }
  get f() { 
    return  this.profileForm.controls; 
}}

HTML部分如下。

<form class="form-horizontal" [formGroup]="profileForm" (ngSubmit)="onSubmit()">
  <div class="panel panel-primary">

    <div class="panel-heading">
      <h3 class="panel-title">C3</h3>
    </div>


  <div class="panel-body">
      <div class="form-group">
        <label class="col-sm-2 control-label" for="fullName">Full Name</label>
        <div class="col-sm-8">
          <input id="fullName" type="text" class="form-control" formControlName="firstName"
          [ngClass]="{ 'is-invalid': submitted && f.profileForm.errors }" >

          <div *ngIf="f.firstName.errors.required">First Name is required {{f.profileForm.errors}}</div>
          <div *ngIf=></div>
        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-2 control-label" for="email">Email</label>
        <div class="col-sm-8">
          <input id="email" type="text" class="form-control" formControlName="EmailMe">
        </div>
      </div>

  </div>
    <div class="panel-footer">
      <button class="btn btn-primary" type="submit" [disabled]="!profileForm.valid">Save</button>
    </div>
  </div>
</form>
 <!--  -->

<router-outlet></router-outlet>

Answer 1

在您访问的模板中的多个位置

f.proflieForm

但是 f 被定义为

get f() { return this.profileForm.controls; }

profileForm 上的控件没有也称为 profileForm 的控件，您可能想要更像：

  <div class="form-group">
    <label class="col-sm-2 control-label" for="fullName">Full Name</label>
    <div class="col-sm-8">
      <input id="fullName" type="text" class="form-control" formControlName="firstName"
      [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }" >

      <div *ngIf="f.firstName.errors?.required">First Name is required {{f.firstName.errors}}</div>
      <div *ngIf=></div>
    </div>
  </div>

其他一切看起来都应该可以正常工作，但您没有在电子邮件表单中添加任何错误字段，尽管您在表单控件中将其标记为必需。

Answer 2

您的验证检查似乎有误。在这里，试一试：

<form 
  class="form-horizontal" 
  [formGroup]="profileForm" 
  (ngSubmit)="onSubmit()">

  <div class="panel panel-primary">

    <div class="panel-heading">
      <h3 class="panel-title">C3</h3>
    </div>


    <div class="panel-body">

      <div class="form-group">
        <label 
          class="col-sm-2 control-label" 
          for="fullName">
          Full Name
        </label>

        <div class="col-sm-8">
          <input 
            id="fullName" 
            type="text" 
            class="form-control" 
            formControlName="firstName">
          <div 
            *ngIf="profileForm.controls['firstName'].touched && profileForm.controls['firstName'].errors.required"
            >
            First Name is required
          </div>
        </div>
      </div>

      ...

    </div>

    ...

  </div>

</form>

另外 Angular 自动应用类像 ng-invalid 和 ng-touched 无效和触摸的表单控件。所以你可以利用它来简化你的 CSS:

input.ng-touched.ng-invalid {
  border: 1px solid red;
}

Here's a Working Sample StackBlitz for your ref.

Angular 反应式验证

Angular Reactive Validation

angular-ui-router

angular-directive

angular-material

angular