详解Angular2响应式表单(3)

<div formArrayName="secretLairs"> <div *ngFor="let address of secretLairs.controls; let i=index" [formGroupName]="i" > <!-- The repeated address template --> </div> </div>

效果就是定义好这个FormArray以后就可以使用ngFor把这一个表单列表遍历出来了(直接使用ngModel加ngFor能省不少事情...)。

总结:

笔者目前使用ng2还没涉及到比较复杂的表单,所以对原文提到的内容理解并不是很深,加上老外写的文章通常都过于完整,都喜欢用长篇大论来说明一个简单的知识点,所以本文后半段其实没多少原文的影子,纯属笔者自己拙劣的概括,并且没有做过太多实践。

回看ng2的响应式表单能力,提供的指令以及服务也就这么几个(FormControl、FormGroup、FormArray、FormBuilder以及几个功能性方法),巧妙在使用这些能力就能完成一个强大的表单界面,其编码体验绝对是远超传统jQuery强行从DOM读取节点值的方式的,并且提供了除了简单的ngModel能力之外的更具体更强大的数据绑定方案,还有本文未提及的表单验证这个大内容,在ng2提供的这个响应式表单方案下实现起来也是很得心应手的。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wyxzjy.html