Angular 4 表单验证答案

【问题标题】：Angular 4 form validationAngular 4 表单验证
【发布时间】：2017-09-21 16:25:00
【问题描述】：

如何通过单击外部链接（即标签外侧）来验证 Angular 4 中的表单。如果表单有效，则对表单数据执行一些操作，否则会显示验证消息。如果表单有效，我不想提交表单，只需要获取表单字段值。

【问题讨论】：

查看此链接reactive, template

标签： forms angular validation

【解决方案1】：

这是我对另一个问题的回答：

简单的方法是使用响应式表单，如下所示：

代码：

 import {ReactiveForm, FormBuilder, Validators} from '@angular/form';
    export class SignupFormComponent implements OnInit {
      userForm: FormGroup;
      firstName: string;

      constructor(private _formBuilder:FormBuilder){}

      ngOnInit() {
        this.userForm = this._formBuilder.group({
          'firstName': ['',[Validators.required,Validators.minLength(5)]]
        });
      }

      onSubmit() {
        console.log(this.firstName);
      }
    }

HTML：

     <form [formGroup]="userForm" (ngSubmit)="onSubmit()" name="userForm">
          <div class="form-group">
            <label>First Name</label>
            <input type="text" [(ngModel)]="firstName" class="form-control" formControlName="firstName">
            <p *ngIf="userForm.controls.firstName.invalid && (userForm.controls.firstName.dirty || userForm.controls.firstName.touched)"> Error message </p>
          </div>
          <button type="submit"  class="btn btn-primary" [disabled]="userForm.invalid">Submit </button>
        </form>

【讨论】：