如何从列表中填充表单以在 Angular2 中更新？

Question

我是 angular 的新手。我已经创建了反应形式。我需要使用 GET REST 调用中的值填充表单，以便我可以更新。

列表和表单是不同的组件。单击列表上的编辑应该会带我到一个新的 url 填充值。我应该用 @Input 还是 observables 来实现它？请指出一些例子。

Answer 1

要更改通过响应式表单范例构建的控件的值，请使用 AbstractControl#setValue or AbstractControl#patchValue 方法。第一个参数是您要设置的新值。

这是一个用法示例。

form = this.fb.group({
  username: ''
})

ngOnInit() {
  this.form.setValue({username: 'Name'})
}

setValue 和 patchValue 之间的区别在于 setValue 更严格：在更新 FormGroup 的情况下，它不允许任何缺失或额外的字段价值。例如，假设我们得到了这样构建的表单。

form = this.fb.group({
  username: '',
  password: '',
})

我们只想更新密码。以下将起作用。

this.form.patchValue({password: '123456'})

但是下面会失败，因为我们没有为 username 控件提供值。

this.form.setValue({password: '123456'}) // runtime Angular error

How to populate a form from a list to update in Angular2?