模板驱动表单
表单的控制逻辑写在组件模板中，适合简单的表单类型。依赖模板中的指令来创建和操作底层的对象模型。它们对于向应用添加一个简单的表单非常有用，比如电子邮件列表注册表单。它们很容易添加到应用中，但在扩展性方面不如响应式表单。如果你有可以只在模板中管理的非常基本的表单需求和逻辑，那么模板驱动表单就很合适。
简单的说：模板驱动表单及使用[(ngModel)]绑定属性值的表单
在模板驱动表单中，表单模型是隐式的，而不是显式的。指令
NgModel为指定的表单元素创建并管理一个FormControl实例
具体使用
准备
在根module下引入BrowserModule,BrowserAnimationsModule两个模块
在根module中AppModule添加过
BrowserModule后，其它Module中不能再添加BrowserModule、BrowserAnimationsModuleNoopAnimationsModule用
CommonModule代替
1、创建form元素
即<form #demoForm="ngForm" (submit)="onSubmit(demoForm)"></form>
<form> 标签添加模板引用变量 #demoForm，对 NgForm 指令实例的引用，该指令实例管理整个表单。
NgForm会创建一个顶级的FormGroup实例，并把它绑定到<form>元素上，以跟踪它所聚合的那些表单值并验证状态。只要你导入了FormsModule，默认情况下这个指令就会在所有<form>标签上激活。你不需要添加特殊的选择器。
2、添加表单控件
<input name="name" [(ngModel)]="formObj.name />"
在元素上使用
[(ngModel)]时，必须为该元素定义一个name属性。Angular 会用这个指定的名字来把这个元素注册到父<form>元素上的NgForm指令中。
3、添加表单校验
<div class="col-12 md:col-9">
<input
pInputText
id="name"
type="text"
name="name"
placeholder="真实姓名"
[(ngModel)]="formObj.name"
required minlength="4"
#name="ngModel"
/>
<small *ngIf="name.touched && !name.valid && name.errors">
<div *ngIf="name.errors['required']">请填写用户名</div>
<div *ngIf="name.errors['pattern']">不符合正则规则</div>
</small>
</div>
内置验证器
| 内置验证指令 | 解释 |
|---|---|
| required | 要求控件具有非空值 |
| minlength | 字段最小长度 |
| maxlength | 字段最大长度 |
| pattern | 验证正则 例如：pattern=“\d” 匹配一个数值 |
自定义验证器
模板驱动表单，添加自定义验证器需要添加自定义指令，指令包含了 validator 函数
该情况下建议使用响应式表单
控件状态的 CSS 类
提交表单后，Angular 会将 ng-submitted 类应用于 form 元素
.ng-submitted (只对 form 元素添加)
| 状态 | 为 TRUE 时的类名 | 为 FALSE 时的类名 |
|---|---|---|
| 该控件已被访问过 | ng-touched | ng-untouched |
| 控件的值已被更改 | ng-dirty | ng-pristine |
| 控件的值是有效的 | ng-valid | ng-invalid |
.ng-valid[required], .ng-valid.required {
border-left: 5px solid #42A948; /* green */
}
.ng-invalid:not(form) {
border-left: 5px solid #a94442; /* red */
}
错误信息提示
添加#name="ngModel" name为对应控件name
我们使用#name="ngModel"创建了一个模板引用变量，这样我们在下面就可以使用name来获取这个表单控件（FormControl）的引用。表单控件有一些属性，如pristine,dirty, valid, touched，这几个都是状态类型，表示某一种状态是否为真。除此以外还有控件的值可以用name.value获取。最后，还有验证的错误信息结果，会放在name.errors里。表单控件的验证会将验证器的名字作为key放在errors里面，对应的值是true。我们就是用这个特性，来根据控件验证的不同结果，来显示友好的错误信息。