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

时间:2019-01-07 07:21:21

标签: angular5

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

我的问题是,当我选中复选框并单击提交按钮时,单选值未发布。但是,在我单击复选框然后单击单选按钮之一之后,该值就会发布。

如何解决此问题?

这是我尝试过的代码:

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();
}

1 个答案:

答案 0 :(得分:1)

使用反应式表单时,请先从模板中删除所有ngModel

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

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

工作StackBlitz DEMO