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

Question

我有一个简单的自定义单选按钮控件。 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>

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

不确定我做错了什么。感谢任何帮助！

Answer 1

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

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

App.component.ts

title: NgForm;

radioList = ['Male', 'Female'];

onValueChange(event) { this.title = event }

Myradiobutton.Component

@Input() inputList = [];

@Output() changedInput = new EventEmitter<any>();

inputData: string; constructor() { }

ngOnInit() {}

onChange(event, form) { this.changedInput.emit(form) }

Myradiobutton.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>`

输出

{ "gender": "Male" } 要么 { "gender": "FeMale" }

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

How to properly set the value of a custom radiobutton control in an Angular reactive form?

angular

angular-forms