无线电输入和同时输入的默认值

Question

我有一组对象需要编辑。数组如下：

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

只要answers.length

，我就会为创建输入做 ngFor

<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 个无线电输入。

我该怎么做？

Answer 1

查看此 Stackblitz example 无线电输入以解决您的问题。

例如：

模板：

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

app.component

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'];
  }
}

无线电输入和同时输入的默认值

Default value on radio input and input at the same time

angular

ng-bootstrap