单击角度 7 时，将同时选择具有相同 formcontrolname 的单选按钮

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>

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

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

有什么方法可以一次区分两者和 select 一个吗？

Answer 1

输入需要定义值。此外，当您构建 FormGroup 时，您可以根据需要定义默认值。

这个问题可能对你更有帮助。

 <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 2

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

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

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>

希望这对您有所帮助。 [值]="place" 和 FormControl(this.places[0])

单击角度 7 时，将同时选择具有相同 formcontrolname 的单选按钮

radio button with same formcontrol name is getting selected together on click in angular7

html

javascript

select

radio-button

angular