默认情况下，Angular 2 检查单选按钮答案

【问题标题】：Angular 2 check radio button by default默认情况下，Angular 2 检查单选按钮
【发布时间】：2021-03-14 20:01:45
【问题描述】：

我正在尝试检查默认为零值的单选按钮。我正在尝试使用 [checked]='true' 属性。但这不起作用。

<input type="radio" name="unitTrusts-pnl" id="unitTrusts-pnl0" class="with-gap" [value]="0" [(ngModel)]="unitTrustsPnl"  [checked]='true'>
<input type="radio" name="unitTrusts-pnl" id="unitTrusts-pnl0" class="with-gap" [value]="1" [(ngModel)]="unitTrustsPnl">

演示

https://stackblitz.com/edit/angular-jj9gib

【问题讨论】：

试试[checked]=" 'checked' "
@KamilKiełczewski 不确定它是否是有效的 HTML，即使是，它也会被 ngModel 覆盖。
只需初始化你的变量unitTrustsPnl = 0;
@KamilKiełczewski 。感谢您的回复，但它不起作用。在演示网址中尝试过stackblitz.com/edit/angular-jj9gib
@KiranDash 用 0 初始化它（数字，而不是字符串）

标签： angular

【解决方案1】：

每个单选按钮都有一个名为 value 的属性，这意味着如果您将 ngModel 的值 (unitTrustsPnl) 设置为每个单选按钮的值，则会检查该单选按钮。

比如你有

<input type="radio" name="unitTrusts-pnl" id="unitTrusts-pnl0" class="with-gap" [value]="0" [(ngModel)]="unitTrustsPnl">

因此，如果您将 unitTrustsPnl 值设置为 0 ，此无线电将检查等等。

更新：你的变量（unitTrustsPnl）应该是数字类型，声明它像

public unitTrustsPnl: number;

它的原因是因为你提到 [value]="0" HTML 认为你有一个数字类型的变量。

【讨论】：

没有。这没用。请在此处查看演示 stackblitz.com/edit/angular-jj9gib
你的变量应该是数字，检查 unitTrustsPnl: number = 1;
我的错。有用。它应该是一个数字。我初始化为字符串。

【解决方案2】：

由于按钮绑定到变量，请尝试设置变量：

unitTrustsPnl = 0;

【讨论】：

感谢您的回答，但不起作用。我试过在演示网址stackblitz.com/edit/angular-jj9gib
我的错。有用。它应该是一个数字。我初始化为字符串。

【解决方案3】：

除了你已经拥有的 [checked] 之外，尝试添加这个：

[attr.checked]="true"

【讨论】：

感谢您的回答，但不起作用。我在演示网址中尝试过。 stackblitz.com/edit/angular-jj9gib

【解决方案4】：

做类似[(ngModel)]=“variableWithZeroValue” [checked]=“variableWithZeroValue==0? true: false” 并在类的构造函数中初始化variableWithZeroValue=0。

但是，只要 variableWithZeroValue 的值为零，它就会始终选中复选框。

希望，它会有所帮助。

【讨论】：

【解决方案5】：

parent.component.ts

import {Component} from '@angular/core';
import {Form, NgForm} from '@angular/forms';

interface Gender {
  id: number;
  name: string;
  title: string;
  value: string;
}

const gendersList = [
  {id: 1, name: 'gender', value: 'male', title: 'Male'},
  {id: 2, name: 'gender', value: 'female', title: 'Female'}
];

@Component({
  selector: 'app-switch-case',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {

  radioList: Gender[] = gendersList;

  constructor() { }

  onSubmit(form: NgForm): void {
    console.log('onSubmit form',form)
  }

}

parent.component.html


<form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)">
    <div>
        <label for="gender">
            <app-radio *ngFor="let radio of radioList"
                [title]="radio.title"
                [groupName]="radio.name"
                [value]="radio.value"
              [defaultValue]="'female'"
            ></app-radio>
        </label>
    </div>
    <button [disabled]="!itemForm.valid" type="submit">Submit</button>

</form>

radio.component.ts

import {Componen, Input} from '@angular/core';
import {ControlContainer, NgForm} from '@angular/forms';

@Component({
  selector: 'app-radio',
  templateUrl: './radio.component.html',
  styleUrls: ['./radio.component.css'],
  viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
})
export class RadioComponent {
 @Input() title: string;
 @Input() groupName: string;
 @Input() value: string;
 @Input() defaultValue: string;
 @Input() isRequired: boolean;
  constructor() { }

}

radio.component.html

<div>
    <input
        type="radio"
        [value]="value"
        [name]="groupName"
        [ngModel]="defaultValue"
        [required]="isRequired"
    >
    <span>{{title}}</span>
</div>

【讨论】：