Question

我是Angular的新手，我正在浏览Angular 4学习资料，以便在创建FormGroup时初始化默认值以形成控件。

当然angular提供SetValue（）和patchValue（）来初始化控制字段，我特别关注：

ngOnInit(): void {
    this.customerForm = this.fb.group({
        firstName  : {value:'Naga',disabled:false},
        lastName   : {value:'R',disabled:false},
        email      : {value:'test@gmail.com',disabled:false},
        sendCatalog: {value:true,disabled:false}
    });
}

问题是，如果我提供'价值'和'禁用'{value:'Naga',disabled:false}属性，则值'Naga'会出现在文本框中。但如果我单独声明{value:'Naga}，则输入框会显示[object object]。

是否必须提供'禁用'？

以下是我如何使用 get（）属性语法将控制器的默认值返回给html。

假设我的初始化适用于firstName {value:'Naga'}没有'禁用'属性

get firstName()
{
    return this.customerForm.get('firstName').value;
}

Answer 1

我实际上从未见过这种语法。

你可以尝试一下吗？

this.customerForm = this.fb.group({
  firstName  : 'Naga',
  lastName   : 'R',
  email      : 'test@gmail.com',
  sendCatalog: true
});

你有第二种语法

this.customerForm = this.fb.group({
  firstName  : ['Naga', [Validators.required]],
  // Others ...
});

允许你给它验证器，但我从未见过对象语法......

Answer 2

如果要在创建formGroup时为其赋值，可以执行以下操作。

 this.filterForm = new FormGroup({
  'customerName': new FormControl('user1', [Validators.required]),
  'amount': new FormControl(0, []),
  'invoicedate': new FormControl(new Date(), []),
  'phone': new FormControl('+919820412847', [])
});

或者，如果您希望在数据来自API之后将值设置为formGroup，则可以使用

表单初始化后

patchValue 或 setValue

this.filterForm.patchValue({ 'customerName' : data.customerName, 'amount': data.price })

Angular 4分配默认值（反应形式）

2 个答案: