代码之家 › 专栏 › 技术社区 › Deadpool

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

angular-ngmodel forms angular javascript

0

Deadpool · 技术社区 · 7 年前

做一个简单的'模板驱动的形式'我得到错误,虽然我没有做什么特别的。这是一个简单的表单,只有一个输入和一个必需的验证。这就是全部。有人能帮我吗?

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>

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

快照:

有人能指出,我到底做错了什么?

2 回复 | 直到 7 年前

1

2

SiddAjmera 7 年前

因为您已经声明了一个模板并为其赋值 ngModel 通过做 #firstName="ngModel" ,的 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

1

Muhammed Albarmavi 7 年前

你不需要使用 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