Angular Reactive Form - 填充表单模型

setValue

使用setValue，可以通过传递其属性与FormGroup后面的表单模型完全匹配的数据对象来一次分配每个表单控件值。

在分配任何表单控件值之前，setValue方法会彻底检查数据对象。

它不会接受与FormGroup结构不匹配的数据对象，或者缺少组中任何控件的值。 这样，如果您有打字错误或嵌套控件错误，它可以返回有用的错误消息。 patchValue将默认失败。

另一方面，setValue将捕获错误并清楚地报告错误。

请注意，很多数据模型(data model)可以直接作为setValue的参数，只要它们的形状类似于组件的FormGroup结构。

patchValue

使用patchValue，您可以通过提供一个键/值对的对象来为仅感兴趣的控件分配值到FormGroup中的特定控件。

使用patchValue，您可以更灵活地应对大量不同的数据和表单模型。 但是与setValue不同，patchValue无法检查缺少的控件值，并且不会引起有用的错误。

何时设置form模型的值（ngOnChanges）

 //  类
  //  @Input() connection: Connection
  //  implements  OnChanges 
 ngOnChanges() {
          if  ( this  .validateForm) {
              this  .validateForm.patchValue({
                connection: {
                    name:   this  .connection.name,
                    connectionType:   this  .connection.connectionType
                },
                options:   this  .connection.options,
                description:   this  .connection.description,
                properties:   this  .connection.options.properties
            });
              this .validateForm.valueChanges.subscribe((data) =>  {
                console.log(  '  Form changes  '  , data);
            });
        }
    } 

 

链接：http://www.jianshu.com/p/3c97d908af47

查看更多关于Angular Reactive Form - 填充表单模型的详细内容...