简单的模板驱动表单Angular4出现错误

Question

制作一个简单的“模板驱动的表单”，尽管我没有做任何特别的事情，但是却出现了错误。这是一种简单的形式，只有一个输入且需要一个验证。就这样。有人可以帮我吗？

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>

错误：

  

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

快照：

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

Answer 1

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

这样更改模板：

*ngIf="firstName.touched"

这是您推荐的Working StackBlitz。

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

  

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

stackblitz demo