Angular 如何以角度反应形式正确设置自定义单选按钮控件的值？

我有一个简单的自定义单选按钮控件。HTML:

<label class="radiobutton-container" >
    <ng-content></ng-content>
    <input type="radio" [value]="value" [name]="name" [disabled]="disabled" (change)="handleChange($event)" [checked]="checked"/>
    <span [ngClass]="{'checkbase': true,
    'checkmark' : checked
    }"></span>
</label>

一般来说，它工作正常，我可以判断它是否已检查并将其放入组中，等等。但是-当我在表单中使用它时，我只是将组的值设置为“true”，而不是组件的值：

<form #form="ngForm" >
    <my-radiobutton [ngModel]="mymodel" [name]="'options'" [value]="'value1'" >Value 1</my-radiobutton>
    <my-radiobutton [ngModel]="mymodel"   [name]="'options'" [value]="'value2'" >Value 2</my-radiobutton>
    <my-radiobutton [ngModel]="mymodel"  [name]="'options'" [value]="'value3'" >Value 3</my-radiobutton>
</form>
<p>form value:</p>
<pre>{{ form.value | json }}</pre>

值1
价值2
价值3
表单值：

`<form> 
   <app-my-radiobutton [inputList]="radioList" 
   (changedInput)="onValueChange($event)"></app-my-radiobutton>
</form>
<pre *ngIf="title">
   {{title.form.value | json}}
</pre>`

{{form.value | json}}

当我打印表单的值时，它只是“options:true”，而不是“value1”、“value2”等

---

不知道我做错了什么。感谢您的帮助

使用数组而不是一次又一次地调用组件，请参考下面的代码 App.component.html

`<div class="container">
    <form #form="ngForm">
        <div *ngFor="let item of inputList; let i = index">
            <input type="radio" id="{{item+i}}" name="gender" value="{{item}}" 
            [(ngModel)]="item" (change)="onChange($event, form)">
            <label for="male">{{item}}</label><br> 
        </div>
    </form>
</div>`

输出

{ “性别”：“男性” }或{ “性别”：“女性”

---

}

因此，基本上该组件是一个radiobuttongroup，而不是一个单独的单选按钮？是的，当它必须在组中时，不需要多次调用该组件。这解决了我的问题。我仍然很好奇为什么在我的初始示例中单选按钮不发送值，但是这种方法更干净。