您如何使用无线电按钮在真实和错误值之间切换？使用角和反应性形式（formarray）

Question

这是我在formarray中拥有的广播按钮。

   <input
               
                type="radio"
                formControlName="correctAnswer"
                value=""
                name="correctAnswer"
                
              />

当选择收音机时，我希望我得到的价值是“ true”。当未选择时，我希望返回的值为“ false”。该值应将其保存在无线电输入本身中，以便以我的formarray值显示。

有什么想法吗？我考虑过进行复选框，但是一次只能选择一个。我基本上需要一个复选框，就像收音机一样，从某种意义上说，它只有一个formarray才是真实的。

提前致谢。

Answer 1

我认为，最好使用复选框：

<mat-checkbox formControlName="active" id="activeFilter">Active</mat-checkbox>

但是，如果您想使用RadioButton，则如果您在FormGroup中初始化此值，则可以使用。

this.formGroup = new FormGroup({
  active: new FormControl(false),
});

并指定html中的值：

<mat-radio-group aria-label="Select an option" formControlName="active">
  <mat-radio-button value="true">True</mat-radio-button>
  <mat-radio-button value="false">False</mat-radio-button>
</mat-radio-group>

Answer 2

在某种意义上说，开关状态是true false，无线电按钮并不意味着保持真/错误。该值应存在或不存在 - 是否可以切换。我还建议使用此类操作的复选框（如果需要的话，看起来像无线电按钮）。但是...我们可以做这样的事情：

/**
 * @title Radios with ngModel
 */
@Component({
  selector: 'radio-ng-model-example',
  templateUrl: 'radio-ng-model-example.html',
  styleUrls: ['radio-ng-model-example.css'],
})
export class RadioNgModelExample {

  seasons: any[] = [
    { name: 'Winter', value: false },
    { name: 'Spring', value: false },
    { name: 'Summer', value: false },
    { name: 'Autumn', value: false },
  ];
  
}

<label id="example-radio-group-label">Pick your favorite season</label>
<br />
<ng-container *ngFor="let season of seasons">
  <mat-radio-button
    name="{{season.name}}"
    class="example-radio-button"
    [checked]="season.value === true"
    [value]="season.value"
    (click)="season.value = !season.value">
    {{season.name}} current value is {{season.value}}
  </mat-radio-button>
  <br />
</ng-container>

工作示例： https://stackblitz.com/edit/angular-lcrva2-cxphui?file=src%2fapp%2fradio-ng-model-example.html

如果您需要在广播广播电台上的formconconconconconconconcontrols按钮，每个广播按钮应在其自己的无线电组中，以进行模板驱动的表单控制，或使用反应性方法并从季节[]中读取值。