Angular4反应式表单验证不起作用[关闭]答案

【问题标题】：Angular4 reactive form validation not working [closed]Angular4反应式表单验证不起作用[关闭]
【发布时间】：2019-03-26 06:00:06
【问题描述】：

在 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])
 });
}

【问题讨论】：

为您的第二个 input 制作一个单独的 formControl
不要包含图片和图片链接作为代码（除非你想显示例如 UI 结果）。在问题中包含实际代码。
您可能想问自己一个问题，为什么在您的模板中使用重复的formControl？
编辑您的问题，将您在图片中显示的文字添加到问题中。

标签： angular angular4-forms reactive-forms

【解决方案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" />

【讨论】：

我试过了，但没用