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

油管视频: 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!"

相关推荐
轻口味43 分钟前
命名空间与模块化概述
开发语言·前端·javascript
吉大一菜鸡1 小时前
FPGA学习(基于小梅哥Xilinx FPGA)学习笔记
笔记·学习·fpga开发
前端小小王1 小时前
React Hooks
前端·javascript·react.js
迷途小码农零零发1 小时前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
娃哈哈哈哈呀2 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
旭东怪2 小时前
EasyPoi 使用$fe:模板语法生成Word动态行
java·前端·word
CCSBRIDGE3 小时前
Magento2项目部署笔记
笔记
ekskef_sef4 小时前
32岁前端干了8年,是继续做前端开发,还是转其它工作
前端
亦枫Leonlew4 小时前
微积分复习笔记 Calculus Volume 2 - 5.1 Sequences
笔记·数学·微积分