[Angular] 笔记 15：模板驱动表单 - 表单验证

小公鸡卡哇伊呀~2024-01-03 8:52

油管视频： Form Validation

有三种类型的验证： valid, pristine(是否被编辑过，被改过)，以及 touched

相反的属性： invalid, dirty, untouched

pokemon-template-form.component.html 代码修改：

任何时候看见 "ngModel"，就知道是用于表单验证。

html 复制代码

<form #form="ngForm">
  Pokemon Name:
  <input type="text" [(ngModel)]="pokemon.name" name="name" />
  <label>
    <input
      type="radio"
      name="isCool"
      [value]="true"
      #pokemonName="ngModel"      增加模板引用变量 pokemonName
      [ngModel]="pokemon.isCool"
    />Pokemon is cool?
  </label>
  <label>
    <input
      type="radio"
      name="isCool"
      [value]="false"
      [ngModel]="pokemon.isCool"
      (ngModelChange)="toggleIsCool($event)"
    />Pokemon is NOT cool?
  </label>
  <label>
    <input
      type="checkbox"
      name="acceptTerms"
      [(ngModel)]="pokemon.acceptTerms"
    />
    Accept Terms?</label
  >
</form>
<div>
  MODEL: {{ pokemon | json }} 
  FORM: {{ form.value | json }}
  / 新增code
  ERROR: <div *ngIf="!pokemonName.pristine">NOT PRINSTINE ANYMORE IT IS DIRTY!</div>
</div>

web 界面，如果选了其他 radio button，就会出现"NOT PRINSTINE ANYMORE IT IS DIRTY!"