angular form 组件、双向绑定；反应式表单

更新：

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指令 

• 使用默认值

• 引入验证