我需要对有角度的表单进行验证答案

【问题标题】：I need to do validations for a form in angular我需要对有角度的表单进行验证
【发布时间】：2019-04-25 19:10:14
【问题描述】：

import {  FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
   ngOnInit() {
 
    this.createFormControls();
    this.createForm();
  }
  createFormControls(){
    
    this.firstName = new FormControl('',Validators.required);
    this.lastName= new FormControl('',Validators.required);
    this.Address= new FormControl('',Validators.required);
    this.age = new FormControl('',Validators.required);
    this.phnumer= new FormControl('',Validators.required);
  }
  createForm(){
    this.form = new FormGroup({
      name: new FormGroup({
      firstName:this.firstName,
      lastName: this.lastName,
      Address:this.Address,
      age:this.age,
      phnumer:this.phnumer
      }),
    });
  }

我需要在 angular6 中验证一个表单，我有 5 个字段，但是需要在没有提交按钮的情况下进行验证，我必须在同一个内联中验证它们。这是我在 ts 文件中的代码，现在我已经在 html 页面中实现了验证，但是验证应该在同一行中显示错误消息，而不是单击提交按钮

【问题讨论】：

到目前为止你实现了什么？您当前的问题太宽泛，无法回答。请添加更多细节。另外，请阅读：How to create a Minimal, Complete, and Verifiable example
我正在搜索没有提交按钮的表单验证。表单必须经过验证，这是我想知道的。
到目前为止你实现了什么？请添加一些示例代码来使用。您可以使用StackBlitz 创建一个。
你用的是什么表格？反应式表单还是模板驱动表单？
我正在使用 ReactiveForms

标签： html css angular typescript angular6

【解决方案1】：

您可以使用 Angular 中的内置验证器来实现此目的 (https://angular.io/guide/form-validation#built-in-validators)

在你的组件中，创建一个表单组和一个getter方法，通过父组中的get方法访问表单控件。我将提供单个字段的示例。

createForm(){
    this.form = new FormGroup({
        firstName:  new FormControl('', Validators.required)
    });
}

get firstName() {
    return this.form.get('firstName');
}

在您的 HTML 中，您可以使用条件表达式和验证属性来显示错误。

<form [formGroup]="form">
    <label for="firstName">First Name
        <input id="firstName" formControlName="firstName">
        <div *ngIf="firstName.invalid && (firstName.dirty || firstName.touched)">
            <div *ngIf="firstName.errors.required">
                First Name is required.
            </div>
        </div>
    </label>
</form>

【讨论】：