Angular 4 - 反应形式启用/禁用不起作用

Question

我在我的应用程序中启用和禁用表单控件时遇到问题。这可能是因为表单在异步上下文中被启用/禁用。

代码是这样的。

用户.component.html

 <form [formGroup]="form">
    <input type="text" id="name" formControlName="name" />
    <input type="text" id="age" formControlName="age" />
</form>

用户.component.ts

 ngOnInit() {

     this._route.queryParams.subscribe(params => {
            getUser(params.userId).subscribe(user => {
                 this._buildForm(user);
            })
     });
}

private _buildForm(user){
    this.form = _fb.group({
        name: [{value: user.name, disabled: user.someCondition}, Validators.required],
        age: [{value: user.age, disabled: user.anotherCondition}, Validators.required]
    })
}

当用户第一次加载参数更改时，控件会根据相关条件启用/禁用。当参数随后发生变化时，尽管值已适当设置，但控件的状态保持不变。

我尝试了不同的方法来解决这个问题，但没有帮助。例如，我在 _buildForm 方法的末尾尝试了以下内容。

 this.form.disable() //Doesn't do anything

this.form.controls.name.disable(); //Doesn't help

以下是按预期工作的一件事（但这不是必需的）。

 <button (click)="form.disable()" value="Disable Form" />
<button (click)="form.enable()" value="Enable Form" />

我觉得问题是由于 _buildForm() 是从异步上下文（订阅方法）调用的。

我该如何解决这个问题？

更新

请注意，Observable 订阅是在导航的基础上触发的，如下所示。

 this._router.navigate([], {
   relativeTo: this._route,
   queryParams: {userId: 10}
})

更新 2 https://angular-cvf1fp.stackblitz.io

这是理解我的问题的更简单方法

原文由 Kashif Nazar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您只需要启用/禁用表单控件的方法。

这是 stackblitz 示例。它工作得很好。

 @Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  group;
  isDisabled = true;

  constructor(fb: FormBuilder) {
    this.group = fb.group({
      stuff: fb.control({value: 'stuff', disabled: this.isDisabled})
    });
  }

  toggle() {
    this.isDisabled = !this.isDisabled;

    this.group.controls.stuff[this.isDisabled ? 'enable' : 'disable']();
  }
}

原文由 Sharikov Vladislav 发布，翻译遵循 CC BY-SA 3.0 许可协议