Question

我有一个带有用于创建和更新用户的表单的组件。我通过输入参数proxy_set_header Host $http_host;获取有关要更新的用户的信息。我也想使用此参数将有关所选用户的数据动态粘贴到反应形式。我创建了这样的表单：

@Input('user') user

我希望更新@Input('user') user = new User(); form: FormGroup = this.fb.group({ id: [{ value: this.user.id, disabled: true }], login: [this.user.login], password: [{ value: '', disabled: true }, [Validators.required, Validators.minLength(5), Validators.maxLength(100)]], userName: [this.user.userName, [Validators.required, Validators.minLength(2), Validators.maxLength(100)]], email: [this.user.email, [Validators.email]], lastLoginDate: [this.user.lastLoginDate], loginAttempts: [this.user.loginAttempts], passwordChangeDate: [this.user.passwordChangeDate], passwordChangeRequired: [this.user.passwordChangeRequired], roles: this.fb.array([this.user.roles]), isActive: [this.user.isActive] });时必须动态更改表单控制值。但是，尽管用户已更新，但表单中的值仍然相同。

Form photo

Answer 1

通过javascript setter方法，您可以在设置新用户时重建表单。

public user = new User();
@Input('user') set setUser(value){
  this.user = value;
  this.createForm();
}

public form: FormGroup;

ngOnInit(){
  this.createForm();
}

private createForm(){
  this.form = this.fb.group({ ... });
}

动态设置值到反应形式控件Angular

1 个答案: