简单的模板驱动表单Angular4给出错误答案

【问题标题】：Simple Template-Driven Form Angular4 is giving error简单的模板驱动表单Angular4给出错误
【发布时间】：2019-03-14 08:18:34
【问题描述】：

制作一个简单的“模板驱动表单”虽然我没有做任何特别的事情，但我遇到了错误。这是一个简单的表单，带有一个输入和一个必需的验证。就这样。有人可以帮我吗？

abc.component.html

<form #customForm="ngForm" (ngSubmit)="alpha(customForm)">

  <input type="text" name="firstName" ngModel #firstName="ngModel" required><br/>

  <div class="red" *ngIf="customForm.firstName.touched">
    <div *ngIf="customForm.firstName.errors.required">Input field is required!</div>
  </div>

  <button type="submit" [disabled]="customForm.invalid">Submit</button>

</form>

错误：

无法读取未定义的“已触及”属性

快照：

有人可以指出，我到底做错了什么？

【问题讨论】：

使用 customForm?.firstName?.touched

标签： javascript angular forms angular-ngmodel

【解决方案1】：

由于您已经声明了一个模板并通过执行#firstName="ngModel" 为其分配了ngModel 的值，因此firstName 模板变量将已经具有firstName FormControl。因此，您可以像这样简单地对其进行检查：*ngIf="firstName.touched"

像这样改变你的模板：

<form 
  #customForm="ngForm" 
  (ngSubmit)="alpha(customForm)">
  <input 
    type="text" 
    name="firstName" 
    ngModel 
    #firstName="ngModel" 
    required>
  <br/>
  <div 
    class="red" 
    *ngIf="firstName.touched">
    <div 
      *ngIf="firstName.errors.required">
      Input field is required!
    </div>
  </div>
  <button 
    type="submit" 
    [disabled]="customForm.invalid">
    Submit
  </button>
</form>

这里有一个Working StackBlitz 供您参考。

【讨论】：

【解决方案2】：

你不需要使用customForm你得到了#firstName的直接引用

  <div class="red" *ngIf="firstName.touched">
    <div *ngIf="firstName.errors.required">
      Input field is required!
    </div>
  </div>

但是当表单控件有效时firstName.errors.required仍然会抛出错误你可以使用?.操作符或者你需要像这样更新ngIf表达式

<div class="red" *ngIf="firstName.touched && firstName.invalid">

或者你可以使用'?.'运营商

  <div *ngIf="firstName.errors?.required">Input field is required!</div>

当表单控件有效时，错误属性将为null

stackblitz demo

【讨论】：