Question

在Angular应用中，我有2个广播组。

始终需要

Injury Type 无线电组。

Damage Reported to Police 无线电组仅在选择Injury Type无线电组的汽车内盗窃选项时显示并要求。< / p>

这是我目前所拥有的：

打字稿：

ngOnInit() {
    this.myForm = this.fb.group({
        damageDetailsTwoForm: this.fb.group({
            injuryTypeGp: this.fb.group({
                injuryType: new FormControl('', Validators.required),
                damageReportedToPolice: new FormControl('')
                }),
            })
        });
}

两个广播组都在显示。

这是我目前拥有的：

<div class="form-group">
                    <label class="control-label">Injury Type:</label>
                    <radio-button-wrapper (getSelectedItem)="getSelectedItem($event)" formControlName="injuryType"
                      name="injuryType" updateOn="click">
                      <radio cid="Bumps, scratches & damage" class="_text-bold" name="insuredType"
                        value="Bumps, scratches & damage" heading="Bumps, scratches & damage" data-orientation="inline">
                      </radio>
                      <radio cid="Replacement of windows etc." name="insuredType"
                        value="Replacement of windows etc." heading="Replacement of windows etc."
                        data-orientation="inline">
                      </radio>
                      <radio cid="Burglary in the car" name="insuredType" value="Burglary in the car"
                        heading="Burglary in the car" data-orientation="inline">
                      </radio>
                      <radio cid="Destroyed roof box, bicycle etc." name="insuredType"
                        value="Destroyed roof box, bicycle etc." heading="Destroyed roof box, bicycle etc."
                        data-orientation="inline">
                      </radio>
                      <radio cid="Wrong fuel" name="insuredType" value="Wrong fuel" heading="Wrong fuel"
                        data-orientation="inline">
                      </radio>
                      <radio cid="Theft of license plates" name="insuredType" value="Theft of license plates"
                        heading="Theft of license plates" data-orientation="inline">
                      </radio>
                    </radio-button-wrapper>
                  </div>
                  <div class="form-group">                    
                    <label class="control-label">Damage Reported to Police:</label>
                    <radio-button-wrapper formControlName="damageReportedToPolice" name="damageReportedToPolice"
                      updateOn="click">
                      <radio cid="Yes" class="_text-bold" name="damageReportedToPolice" value="Yes" heading="Yes"
                        data-orientation="inline">
                      </radio>
                      <radio cid="No" class="_text-bold" name="damageReportedToPolice" value="No" heading="No"
                        data-orientation="inline">
                      </radio>
                    </radio-button-wrapper>
                  </div>

有人可以告诉我为了满足上述要求我需要做什么吗？提前非常感谢！

Answer 1

您可以在初始化表格后将条件验证器功能添加到第二组。

ngOnInit() {
    this.myForm = this.fb.group({
        damageDetailsTwoForm: this.fb.group({
            injuryTypeGp: this.fb.group({
                injuryType: new FormControl('', Validators.required),
                damageReportedToPolice: new FormControl('')
            }),
        })
    });

    this.myForm.controls.damageReportedToPolice.setValidators(() => {
        return this.myForm.controls.injuryType.value === 'Burglary in the car'
            ? [Validators.required]
            : [];
    });
}

然后用*ngIf="myForm.controls.injuryType?.value === 'Burglary in the car'"

用HTML包装第二组

Answer 2

将groupB单选按钮设置为隐藏，直到用户在groupA中选择所需的值为止。更改groupA的单选按钮后，根据GroupA cvalue设置一个布尔值标志以显示/隐藏groupB

组件：

showGroupB: boolean

getSelectedItem(data) {
    console.log(data);
    if (data.value === 'Replacement of windows etc.') {
        // based on required condition
        showGroupB = true
    } else {
        showGroupB = false
    }
}

HTML：

<div class="form-group" *ngIf="showGroupB">
        <label class="control-label">Damage Reported to Police:</label>
        <radio-button-wrapper formControlName="damageReportedToPolice" name="damageReportedToPolice" updateOn="click">
            <radio cid="Yes" class="_text-bold" name="damageReportedToPolice" value="Yes" heading="Yes" data-orientation="inline">
            </radio>
            <radio cid="No" class="_text-bold" name="damageReportedToPolice" value="No" heading="No" data-orientation="inline">
            </radio>
        </radio-button-wrapper>
    </div>

如何基于其他单选按钮组值显示并向单选按钮组添加验证

2 个答案: