angular 表单

引入表单组/表单创建/及验证相关类
import { FormGroup,FormBuilder,Validators,FormControl } from "@angular/forms";

创建表单及验证

const form = new FormGroup({
  // 域: (默认值,验证)
  uid: new FormControl('默认值',Validators.minLength(2)),pwd: new FormControl(''),pwdC: new FormControl(''),},// 要验证多个表单控件并返回错误对象,则:
(fg)=>{
  return fg.get('pwd').value === fg.get('pwdC').value ? null :  {'mismatch': true}
});
// 添加控件
this.form.addControl('text',new FormControl(''))

使用FormBuilder创建表单

public form: FormGroup

this.form = this.formBuilder.group({
  text: ["",[Validators.pattern(/^(.{0,50}n)*[^n]{0,50}$/)]],parent: [''],_id: ['']
})

模板

<!--[FormGroup] 指定FormGroup-->
<form [formGroup]="form" (submit)="save()">

  <!--<md-spinner *ngIf="form.disabled"></md-spinner>-->
  <!--formControlName 指定控件-->
  <inpout placeholder="输入" formControlName="text"></input>

  <button [disabled]="form.invalid || !form.dirty || form.untouched || form.disabled">保存</button>
</form>

常用

// 获取指定控件
this.form.get('text')
// 启用并单
this.form.enable() 
// 禁用表单
this.form.disable()
// 重置表单
this.form.reset()
// 给控件赋值
this.form.setValue({
    Key:value
  })
// 从表单取值
this.form.getRawValue()
// 表单验证错误
this.form.errors

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!