大佬教程收集整理的这篇文章主要介绍了angular4 动态表单，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

angular 表单

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

@H_419_7@创建表单及验证

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(''))

@H_419_7@使用FormBuilder创建表单

public form: FormGroup

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

@H_419_7@模板

<!--[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>

@H_419_7@常用

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

大佬总结

以上是大佬教程为你收集整理的angular4 动态表单全部内容，希望文章能够帮你解决angular4 动态表单所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。