Question

我正在使用单选按钮事件。如果我选择＆＃34;已婚＆＃34;将弹出选项三个输入文本字段（由表单控件验证）（检查图像链接）。如果我仍然选择其他三个单选按钮，则会启用三个输入文本字段的验证，因此我无法提交表单。

我必须在＆＃34; isSelectedmethod（）＆＃34;中编写逻辑。但我不知道如何写它。

// Radio button Selection 
private selectedLink: string = "";

setradio(e: string): void {
  this.selectedLink = e;
}
isSelected(name: string): boolean {
  if (this.selectedLink === "Married") {

    //that three input text fields validation should be enabled here  
    return true;
  }

  return false;
}

Check the Image，

Repo Link

Answer 1

您可以对此使用禁用，禁用表单字段，完全从表单对象中排除，因此不会影响表单的有效性。因此，请检查选择了哪个值，然后在表单字段上调用disable()或enable()。此外，我会稍微更改您的代码并删除额外的变量selectedLink和方法。我不鼓励在模板中调用方法，因为每次更改检测都会调用它们。所以这就是我要做的事情：

this.personalForm = this.fb.group({
  radioCiviStatus: [''],
  spouseName: [{ value: '', disabled: true }, [Validators.required]],
  spouseOccupation: [{ value: '', disabled: true }, [Validators.required]],
  // ...
});

// listen to the change of the radio button and disable/enable fields accordingly:
this.personalForm.controls.radioCiviStatus.valueChanges
  .subscribe(value => {
    if (value === "Married") {
      this.personalForm.get('spouseName').enable();
      this.personalForm.get('spouseOccupation').enable();
    } else {
      this.personalForm.get('spouseName').disable();
      this.personalForm.get('spouseOccupation').disable()
    };
  });

这是一个

Angular中带有单选按钮事件的必需输入文本字段

1 个答案:

StackBlitz