Значение по умолчанию для радиовхода и входа одновременно - PullRequest
Новая
       4

Значение по умолчанию для радиовхода и входа одновременно

2 голосов
/ 13 марта 2020

У меня есть массив объектов, которые мне нужно отредактировать. Массив выглядит так: 

{
  answers: [ { answer: 'answer 1', isValid: true }, { answer: 'answer 2, isValid: false } ]
}

Я делаю ngFor для создания входных данных, пока answers.length

<div class="form-group" *ngFor="let answer of editItem.answers">
    <div class="input-group">
         <div class="input-group-prepend">
               <div class="input-group-text">
                    <input type="radio" [(ngModel)]="answer.isValid" [value]="answer.isValid">
               </div>
         </div>
         <input type="text" class="form-control"  [(ngModel)]="answer.answer">
    </div>
</div>

Мне нужно значение по умолчанию для обоих, и проверен только 1 радиовход.

Как я могу это сделать?

1 Ответ

2 голосов
/ 13 марта 2020

Посмотрите на этот пример Stackblitz для радиовходов, чтобы решить вашу проблему.

Например:

шаблон: 

<h2>{{radioTitle}}</h2>
<label *ngFor="let radiobutton of radioItems">
  <input type="radio" name="options" (click)="model.option = radiobutton"
  [checked]="radiobutton === model.option">{{radiobutton}}
</label>
<p>
  <button (click)="model.option = 'option1'">
    Set option #1
  </button>
</p>
<p>
  Selected option: {{model.option}}
</p>

приложение .компонент 

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  radioTitle: string;
  radioItems: Array<string>;
  model   = {option: 'option3'};

  constructor() {
    this.radioTitle = 'Radio Button in Angular';
    this.radioItems = ['option1', 'option2', 'option3'];
  }
}
...