Angular4反应性表单验证不起作用

Question

在pic1中，我写了一个输入标签（第101行）和另一个从其他地方复制的输入标签（第102行） 但是第一个输入标签有效，但第二个则无效，因为对于第二个输入标签，DOM（pic2）中没有“ ng-invalid ng-touched”类。 pic1 pic2

import { Component, OnInit } from "@angular/core";
import { FormGroup, FormControl, Validators } from "@angular/forms";
@Component({
 selector: "app-sign-up",
 templateUrl: "./sign-up.component.html",
 styleUrls: ["./sign-up.component.css"]
})
export class SignUpComponent implements OnInit {
ngOnInit(): void {
//this.Registration.va
}
Registration = new FormGroup({
  fullName: new FormControl("",[Validators.required])
 });
}

Answer 1

问题是您将相同的控件用于两个不同的输入。每个表单字段必须具有单独的FormControl。

进行以下更改

signUpComponent.component.ts

Registration = new FormGroup({
 fullName1: new FormControl("",[Validators.required]),
 fullName2: new FormControl("",[Validators.required])
})

在您的.html文件中

<input formControlName="fullName1" id="fullName1" />
<input formControlName="fullName2" id="fullName2" />