Question

https://stackblitz.com/edit/angular-7aqzj2

places = ['effil tower','new discover']

new FormGroup({place: new FormControl()});

 <div *ngIf="places?.length > 0" class="col-12">
            <div style=" padding-top: 1em; ">
                <label  *ngFor="let place of places">
                    <input  formControlName="place" type="radio">{{place}}
                </label>
            </div>
        </div>

我正在尝试添加具有相同表单控件名称的单选按钮，并且该值通过服务传递。

这样做时，它具有相同的表单控件名称，因此可以同时选择两者。

有什么办法可以区分两者并一次选择一个吗？

Answer 1

您需要为每个选项使用属性绑定：

<input  formControlName="place" type="radio" [value]="place">

Answer 2

输入需要定义一个 value 。此外，在构造FormGroup时，您可以根据需要定义默认值。

此问题可能会为您提供更多帮助。 Angular 5 Reactive Forms - Radio Button Group

 <div *ngIf="places?.length > 0" class="col-12">
            <div style=" padding-top: 1em; ">
                <label  *ngFor="let place of places">
                    <input  formControlName="place" type="radio" value=place>{{place}}
                </label>
            </div>
        </div>

Answer 3

places = ['effil tower','new discover']

new FormGroup({place: new FormControl(this.places[0])});

 <div *ngIf="places?.length > 0" class="col-12">
            <div style=" padding-top: 1em; ">
                <label  *ngFor="let place of places">
                    <input  formControlName="place" type="radio" [value]="place">{{place}}
                </label>
            </div>
        </div>

希望这会有所帮助。 [value] =“ place”和FormControl（this.places [0]）

单击angular7时，将一起选择具有相同formcontrol名称的单选按钮

3 个答案: