Question

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页面中实现了验证，但是验证应该在同一行中显示错误消息，而不是单击提交按钮

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

我需要对angular

1 个答案: