更新:
1.component.ts:
import { Validators, FormBuilder } from "@angular/forms";//引入
constructor(
private fb: FormBuilder,
) {}//实例化
validateForm = this.fb.group({
supplierName: [null, [Validators.required]],
supplierPhone: [null, [Validators.required, Validators.pattern(/^1[0-9]{10}$/)]],
supplierAddress: [null, [Validators.required]],
comment: [],
});
2. html
<form
nz-form
[formGroup]="validateForm"
class="modalForm"
(ngSubmit)="onSubmit()"
>
<h2 mat-dialog-title>编辑配置项</h2>
<mat-dialog-content>
<mat-form-field class="full-width">
<input
matInput
placeholder="供货商名称"
formControlName="supplierName"
required
/>
</mat-form-field>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button type="button" mat-stroked-button mat-dialog-close>取消</button>
<button mat-flat-button color="primary" [disabled]="loading">
确定
</button>
</mat-dialog-actions>
</form>
1.使用双向绑定,以及angular的表单提交功能
- app.moudle中引入
- 双向绑定 [(ngModel)]="text"
效果
- 提交表单
2.反应式表单
- 在app.module.ts中引入
- 在组件中引入,并放在一个变量里
- 在初始化时实列化这个module
- 定义规则
- 在html中使用 定义的规则
使用formControl指令
- 使用默认值
- 引入验证