Angular 2如何默认选中单选按钮

Question

我想要默认选中数值为零的单选框。我尝试使用[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

- Kiran Dash

---

尝试使用 [checked]=" 'checked' " - Kamil Kiełczewski

只需初始化您的变量 unitTrustsPnl = 0;。 - Pengyy

@KamilKiełczewski。感谢您的回复，但它不起作用。在演示网址https://stackblitz.com/edit/angular-jj9gib中尝试过了。 - Kiran Dash

@Pengyy，感谢您的回复，但它并没有起作用。已经在演示网址stackblitz.com/edit/angular-jj9gib中尝试过了。 - Kiran Dash

@KiranDash 用0（数字，不是字符串）进行了初始化。 - Pengyy

Answer 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认为你有一个数字类型的变量。

- Arash

---

不行。请在此处检查演示 https://stackblitz.com/edit/angular-jj9gib - Kiran Dash

你的变量应该是数字，检查 unitTrustsPnl: number = 1; - Arash

我的错，现在它可以工作了。它应该是一个数字类型，但我初始化为字符串类型了。 - Kiran Dash

Answer 2

除了您已经拥有的 [checked] 外，请尝试添加以下内容：

[attr.checked]="true"

- rrd

---

谢谢回答，但是不起作用。我在演示网址中尝试了。https://stackblitz.com/edit/angular-jj9gib - Kiran Dash

Answer 3

由于按钮与变量绑定，尝试设置变量而不是按钮：

unitTrustsPnl = 0;

- user4676340

---

谢谢回答，但是不起作用。我在演示网址https://stackblitz.com/edit/angular-jj9gib中尝试过了。 - Kiran Dash

我的错。它可以工作了。它应该是一个数字。我初始化为字符串了。 - Kiran Dash

Answer 4

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

但是，这将始终在 variableWithZeroValue 的值等于零时选中复选框。

希望能有所帮助。

- Abhishek Kumar

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

- Сергей Седых