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

【问题标题】：Required input text field with radio Button event in AngularAngular中带有单选按钮事件的必需输入文本字段
【发布时间】：2018-08-17 04:21:30
【问题描述】：

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

我必须在“isSelectedmethod()”中写逻辑，但我不知道怎么写。

// 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

【问题讨论】：

未选中“已婚”时是否隐藏字段？还是您将其完全从 DOM 中删除？
它将从 DOM 中删除 "
"

标签： javascript angular radio-button

【解决方案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()
    };
  });

这是一个

StackBlitz

【讨论】：