Как правильно установить значение пользовательского элемента управления радиокнопкой в ​​Angular реактивной форме? - PullRequest
Новая
       7

Как правильно установить значение пользовательского элемента управления радиокнопкой в ​​Angular реактивной форме?

0 голосов
/ 18 февраля 2020

У меня есть простой пользовательский переключатель радио-кнопки. 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>

В общем, все работает нормально, я могу сказать, проверено ли это, и распределить его по группам и т. Д. c. Но - когда я использую его в форме, я просто использую значение группы как «true» вместо значения компонента: 

<code><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 }}

Когда я печатаю значение форма, это просто «options: true» вместо «value1», «value2» и т. д. c.

Не уверен, что я делаю неправильно. Любая помощь приветствуется!

1 Ответ

1 голос
/ 18 февраля 2020

Используйте массив вместо того, чтобы вызывать компонент снова и снова. Пожалуйста, используйте приведенный ниже код App.component. html

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

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

Выход

{"sex": "Male"} или {" пол ":" FeMale "}

...