0
点赞
收藏
分享

微信扫一扫

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

infgrad 2023-12-29 阅读 25

油管视频: Form Validation

在这里插入图片描述
有三种类型的验证: valid, pristine(是否被编辑过,被改过),以及 touched
在这里插入图片描述
相反的属性: invalid, dirty, untouched

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

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

<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!”

在这里插入图片描述

举报

相关推荐

0 条评论