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

Question

我是棱角分明的新人。我创造了反应形式。我需要使用来自GET REST调用的值填充表单，以便我可以更新。

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

Answer 1

要更改通过反应形式范例构建的控件的值，请使用AbstractControl#setValue或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