Question

我的应用中有一个用户表单。我以Reactive Forms方式在我的组件中创建表单。在某些情况下，我想设置表单控件，以便禁用它们，用户无法与它们进行交互。我的（简化）代码看起来像......

constructor(private usersService: UsersService, private formBuilder: FormBuilder) {}
// I create the readonly boolean

public isReadOnly: boolean = false;
private buildMyForm(): void {
    this.userForm = this.formBuilder.group({
      StatusID: [{value: '', disabled: this.isReadOnly}, Validators.required],
      AddressID: [{value: '', disabled: this.isReadOnly}, Validators.required],
      Comments: [{value: '', disabled: this.isReadOnly}, Validators.maxLength(250)],
      Description: [{value: '', disabled: this.isReadOnly}, Validators.maxLength(250)],
    });
  }


public ngOnInit(): void {
  this.buildForm(); // create the form
  this.usersService.loadUser().subscribe((response:UserData) => {
    // lots of info but we are interested in response.readonly which is a boolean
    if(response.readonly) {
       this.isReadOnly = response.readonly;
    }
  });
}

正如您所看到的，我确定只有在usersService.loadUser()返回值后才能读取表单，现在这时我的formBuilder已经构建了表单，disabled状态将不会如果response.readonly为真，则会受到影响。我应该将this.buildForm();移动到订阅中，因为HTML需要formBuilder [formGroup]="userForm"。我一直在阅读如何更新表单控件，但到目前为止没有任何工作，我想我可以使用.patchValue这样

if(response.readonly) {
this.isReadOnly = response.readonly;
  this.userForm.patchValue({
    // set the disabled status for StatusID, AddressID:, Comments:, Description
  });
}

但我不确定这是否是正确的方法......我不想更新价值？我目前正在阅读文档，但通常这里的人比我快得多，所以如果有人可以提供帮助，请指出我正确的方向。

在我忘记之前 - 我知道我可以使用[disabled]="isReadOnly"或[readonly]="isReadOnly"为我的HTML模板添加条件，我只是认为这是一个更好的方法来获得组件中的逻辑，而不是模板......

Answer 1

您可enable()启用已停用的字段

按控制启用字段

this.userForm.controls.StatusID.enable();

或只是

this.userForm.enable();

将启用所有已禁用的字段

Answer 2

我找到了答案，就是将项目设置为禁用，如下所示：

if(response.readonly) {
    this.userForm.get('StatusID').disable();
    this.userForm.get('AddressID').disable();
    this.userForm.get('Comments').disable();
   this.userForm.get('Description').disable();
}

将Angular 4中的反应式表单控件分配为已禁用，不确定如何或何时使用patchValue

2 个答案: