反应式表单验证器在 Angular 中不起作用答案

【问题标题】：reactive form validator won't work in Angular反应式表单验证器在 Angular 中不起作用
【发布时间】：2018-09-08 14:01:39
【问题描述】：

我的输入字段中有一个 required 类型和 maxLength 的验证器，我正在尝试在我的 HTML 中使用最简洁的代码。我尝试执行以下操作但无法正常工作

HTML

（这行不通）

<form [formGroup]="creditCardForm">
      <input type="text" pInputText formControlName="cardHolderName" required maxlength #cardHolderName/>
            <label *ngIf="form.cardHolderName.invalid &&
            (form.cardHolderName.dirty || form.cardHolderName.touched)" class="invalidField">Cardholder name is required</label>
</form>

form = this.buildCreditCardForm(this.fb).controls;
.
.
buildCreditCardForm(fb: FormBuilder): FormGroup {
   return fb.group({
      cardHolderName: ['', [Validators.required, Validators.maxLength(50)]],
    .
    .
}

HTML（这行得通，但它太长了，很脏）

<form [formGroup]="creditCardForm">
<input type="text" pInputText formControlName="cardHolderName" required maxlength #cardHolderName/>
        <label *ngIf="fcreditCardForm.controls.cardHolderName.invalid &&
        (creditCardForm.controls.cardHolderName.dirty || creditCardForm.controls.cardHolderName.touched)" class="invalidField">Cardholder
          name is required</label>
</form>

【问题讨论】：

虽然第二种方式是只要你感觉，你就可以只用它。第一个将通过错误。
@RohitSharma 它没有给我一个错误。只是没有任何反应。您对如何使我的代码更清洁还有其他想法吗？我什至尝试使用一个返回布尔值的方法并在 ngIf 中使用它，并且该方法中的 if 语句是我目前在 ngIf 中使用的
您应该检查您的控制台是否有错误，可能是无法读取未定义的属性cardHolderName。
尝试记录您的表单，您将看到没有cardHolderName 属性。所以你不能通过 form.cardHolderName 访问它。下一个方法是正确的，我认为它不脏。

标签： angular angular6 angular-validation

【解决方案1】：

您正在混合反应式验证器和模板验证器。不知道你为什么要把事情复杂化，反应形式很简单。

用你的表格给你一个Demo：

HTML：

<form [formGroup]="creditCardForm">
    <input type="text" formControlName="cardHolderName"/>
    <label *ngIf="creditCardForm.get('cardHolderName').invalid">Cardholder name is required</label>
</form>

组件：

  creditCardForm;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.creditCardForm = new FormGroup({
      'cardHolderName': new FormControl(null, [Validators.required, Validators.maxLength(5)])
    });
  }

把它拿走，增强并根据您的需要进行调整。

【讨论】：

你的例子是正确的。我在这里发帖之前在 angular 文档中看到了这一点。这是我第一次使用响应式表单，我不想添加“新 FormControl”，并认为有一种更清洁的方式。谢谢！！