Question

我想使用单选按钮formControl：

constructor(private rest: RestClient, private fb: FormBuilder) {
        this.mySearchform = this.fb.group({
          searchType: '', searchTypeValue: ''
        });
      }

此处searchType是一个单选按钮组，searchTypeValue是一个文本字段。

在我的HTML中，我有：

<div class="form-row">
    <div class="form-group col-2">
        <label for="one" class="col-form-label">
            <input type="radio" [value]="oneValue" id="one" formControlName="searchType"/>
            CustomerId
        </label>
    </div>

    <div class="form-group col-2">
        <label for="two" class="col-form-label">
            <input type="radio" [value]="twoValue" id="two" formControlName="searchType"/>
            AccountNumber
        </label>
    </div>

    <div class="form-group col-2">
        <label for="three" class="col-form-label">
            <input type="radio" [value]="threeValue" id="three" formControlName="searchType"/>
            Email
        </label>
    </div>

    <div class="form-group col-6">
        <input id="searchTypeValue" formControlName="searchTypeValue" class="form-control" />
    </div>
</div>

我正在尝试将值读作：

this.mySearchform.get('searchType').value

我的单选按钮组无法正常工作。在选择其中任何一个时，所有三个都被选中。

我错过了什么或做错了什么？

Answer 1

由于您没有做绑定，因此应该只是 value 而不是 [value]

<label for="one" class="col-form-label">
            <input type="radio" value="oneValue" id="one" formControlName="searchType"/>
            CustomerId
</label>

单选按钮在Angular 5中不起作用

1 个答案: