Angular 4 - Reactive Forms启用/禁用不工作

时间:2018-04-26 18:25:07

标签: javascript angular angular-reactive-forms disabled-input

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

以下是代码的用法。

user.component.html

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

user.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

这是一种更容易理解我的问题的方法

4 个答案:

答案 0 :(得分:2)

你是对的。订阅仅触发一次,因此在提交表单后,用户实体不再更改。为此,请在表单提交中添加一个事件处理程序。

<强> user.component.html

<form [formGroup]="form" (submit)="_updateForm()">
    <input type="text" id="name" fromControlName="name" />
    <input type="text" id="age" fromControlName="age" />
</form>

<强> user.component.ts

private userId: any;


ngOnInit() {
    this._route.queryParams.subscribe(params => {
        this.userId = params.userId;
        this._updateForm();
    });
}

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]
    });
} 

// The update function has to be public to be called inside your template
public _updateForm(){
    getUser(this.userId).subscribe(user => {
        this._buildForm(user);
    });
}    

答案 1 :(得分:1)

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

这是stackblitz example。它运作得很好。

@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']();
  }
}

答案 2 :(得分:1)

fromControlName

你在这里看到一个拼写错误吗?formControlName应该是pg.GraphicsWindow 在那之后,切换将起作用;)

https://angular-rivxs5.stackblitz.io

答案 3 :(得分:1)

  • 默认情况下,在formGroup w / controls中直接创建ngOnit,这样您就可以确定它是否存在,而不必担心异步问题。
  • this._route.queryParams.subscribe(...)中,您可以使用this.form.setValue({//set all control values})this.form.patchValue({//set individual controls})根据需要更新各个控件/一旦可用。
  • 如果要将数据模型与表单模型分开,请将conditionsomeOtherCondition(或user对象的组件实例变量用作整体 - 它们不会#39; t必须相同)。将这些初始化为&#34; false&#34;,然后引用它们来启用/禁用formGroup创建中的控件。您还可以在用户数据到位后在同一.subscribe()块中更新这些变量,而不是等待直接访问user数据模型。

这样,您的控件和formGroup就会存在,并被禁用,直到异步数据可用。