未提交带有单选按钮的表单

Question

我有一个带有两个单选按钮的表单，只有在选中复选框时才会启用。

我的问题是当我选中复选框并单击提交按钮时，没有发布单选值。但是在我单击复选框然后单击其中一个单选按钮之后，值就会被发布。

如何解决这个问题？

这是我试过的代码：

HTML

<form [formGroup]="filterProductTargetForm" (ngSubmit)="onSubmitFilterDataList(filterProductTargetForm.value)">
    <div class="row">
        <div class="col-md-10">
            <input type="checkbox" [ngModel]="isProductTypeChecked" formControlName="checkProductType" (change)="onProductTypeChange($event)" />
            <label>Select A or B</label>
        </div>
    </div>
    <div class="row">
        <label class="col-md-2 uni-label"></label>
        <div class="col-md-10 prduct-type-radio">
            <fieldset [disabled]="!isProductTypeChecked">
                <input type="radio" [checked]="isProductTypeChecked == true" value="A" formControlName="productTypeSelected" [(ngModel)]="productTypeSelected">
                <span>B</span>

                <br>

                <input type="radio" value="B" formControlName="productTypeSelected" [(ngModel)]="productTypeSelected">
                <span>B</span>
            </fieldset>
        </div>
    </div>
    <button class="uni-button def" [disabled]="!filterProductTargetForm.valid">OK</button>
</form>

TS

ngOnInit() {
    this.filterProductTargetForm = this.formBuilder.group({
        'checkProductType': '',
        'productTypeSelected': ''
    });
}

public filterProductTargetForm: FormGroup;
public isProductTypeChecked = false;

onProductTypeChange(event: any) {
    this.isProductTypeChecked = !this.isProductTypeChecked;
    if(!this.isProductTypeChecked)
        this.filterProductTargetForm.controls['productTypeSelected'].reset();
}

Answer 1

使用响应式表单时，首先从模板中删除所有 ngModel。

当复选框值更改时，在您的 onProductTypeChange 函数中设置 productTypeSelected 值

this.filterProductTargetForm.controls['productTypeSelected'].setValue('A');

工作StackBlitz DEMO

未提交带有单选按钮的表单

Form with radio buttons not submitted

angular5

HTML

TS