Angular中使用嵌套Form的详细步骤
我们可以在这个 FormGroup 构造函数的属性里，再增添一个类型为 FormGroup 的实例，形成嵌套的 form：
每一次显式调用 new 创建 FormGroup 和 FormControl 实例显得很繁琐。其实我们可以使用 FormBuilder 通过工厂模式创建。
profileForm = this.fb.group({
firstName: ['Jerry'],
lastName: ['LastName'],
address: this.fb.group({
street: [''],
city: ['']
}),
});
效果：
冒号后面的参数类型是 JSON 数组，第一个参数为默认的初始值，第二个参数为 validator，使用例子如下：
当 lastName 没有维护值时，整个 form 处于 ng-invalid 状态，submit 按钮无法点击。
嵌套 group 的 status 状态会冒泡到父 form.
可以通过 FormGroup.status 直接访问其状态。
this.profileForm.valueChanges.subscribe(
value => {
console.log('group value: ', value, ' status: ',
this.profileForm.status);
}
);
如果我们事先不知道待创建的 form 控件实例的准确数目，使用动态控件是一个不错的选择。所谓动态控件，即我们不需要为每一个控件显式指定 key.
一个实际例子：
aliases: this.fb.array([
this.fb.control('')
])
创建一个 getter 访问器，通过代码的方式获得上图创建的动态控件：
get aliases() {
return this.profileForm.get('aliases') as FormArray;
}因为 this.profileForm.get('aliases') 返回的控件的类型是抽象数据类型 AbstractControl，所以你要为该方法提供一个显式的类型声明来访问 FormArray 特有的语法。
动态添加匿名组件 的方法：
addAlias() {
this.aliases.push(this.fb.control(''));
}
<div formArrayName="aliases">
<h2>Aliases</h2>
<button (click)="addAlias()" type="button">+ Add another alias</button>
<div *ngFor="let alias of aliases.controls; let i=index">
<!-- The repeated alias template -->
<label for="alias-{{ i }}">Alias:</label>
<input id="alias-{{ i }}" type="text" [formControlName]="i">
</div>
</div>最后的效果：
这些匿名控件的值，通过如下方式打印出来：
onSubmit(){
console.warn(this.profileForm.value);
}通过 formArrayName 和 formControlName 给这些匿名控件赋予了索引值，这样可以通过索引访问控件中的内容：
总结
到此这篇关于Angular中使用嵌套Form的文章就介绍到这了,更多相关Angular使用嵌套Form内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本篇文章主要介绍了如何在angular2中获取节点，详细的介绍了几种方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
angular动态删除ng-repaeat添加的dom节点的方法
本篇文章主要介绍了angular动态删除ng-repaeat添加的dom节点的方法，非常具有实用价值，需要的朋友可以参考下2017-07-07
AngularJS框架的ng-app指令与自动加载实现方法分析
这篇文章主要介绍了AngularJS框架的ng-app指令与自动加载实现方法,结合实例形式分析了ng-app指令的功能及自动加载机制的实现技巧,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了深入理解Angularjs 脏值检测，详细的介绍了脏值检测的原理和实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
这篇文章主要介绍了Angularjs 制作购物车功能实例代码的相关资料,并附示例代码，需要的朋友可以参考下2016-09-09
这篇文章主要介绍了AngularJs中$cookies简单用法,结合实例形式分析了AngularJS使用$cookies存储变量相关操作技巧与注意事项,需要的朋友可以参考下2019-05-05
在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化，才能显示给用户。在angularjs中为我们提供了叫filter的指令，让我们能够很轻易就能做到着一些列的功能，angularjs内部为我们提供了number等很多内置的filter。2015-05-05
本篇文章主要介绍了angular 基于ng-messages的表单验证实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
angular inputNumber指令输入框只能输入数字的实现
这篇文章主要介绍了angular inputNumber指令输入框只能输入数字的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要介绍了AngularJS在IE下取数据总是缓存问题的解决方法,分析了问题的原因及AngularJS设置禁止IE对ajax缓存的实现方法,需要的朋友可以参考下2016-08-08
最新评论