默认情况下，使用模板驱动的表单Angular选择单选按钮

Question

我有一个使用模板驱动表单的表单，我想默认选择一个单选按钮，但它不起作用，这是我代码的一部分：

<div class="donut-form-promos">
<span>Promo:</span>
<div class="donut-form-promos-choices">
<input
type="radio"
name="promo"
[value]="'newPromo'"
rquired
ngModel
#promo="ngModel"
/><span>New</span>
<input
type="radio"
name="promo"
[value]="'limitedPromo'"
required
ngModel
#promo="ngModel"
/><span>Limited</span>
<input
type="radio"
name="promo"
[value]="'clubPromo'"
required
ngModel
#promo="ngModel"
/><span>Club memeber</span>
<input
type="radio"
name="promo"
[value]="undefined"
required
ngModel
#promo="ngModel"
[checked]="'checked'"
/><span>None</span>
</div>
</div>

我也在stakeblitz中上传了这个例子，这是一个链接：https://stackblitz.com/edit/angular-ivy-dd8u6v?file=src%2Fapp%2Fapp.component.html，src%2App%2App.component.ts

谢谢。

Answer 1

Angular将把所有具有相同名称属性的单选按钮元素视为一个公共控件。所以你可以说，一堆同名的单选按钮元素完全是一个单一的控制系统输入，只有一个值作为输出(类似于带多个选项的选择(。该值由所选单选按钮元素的值决定。但在角度方面，情况正好相反，即控件的值将决定选择哪个单选按钮。例如，如果单选按钮a具有值"0"；1〃；单选按钮B的值为2，它们是同一控件的一部分，即具有相同的名称，您可以将控件的值设置为"；2〃；在组件初始化期间，它将反映在它的单选按钮上；2〃；将自动被选中。

将指令ngModel绑定到单选按钮元素中的默认值，以便在默认值等于其值的情况下自动选择，例如：

[ngModel]="defaultValue"

您的组件示例变成：

import { Component, VERSION } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
name = 'Angular ' + VERSION.major;
defaultPromo = 'limitedPromo';
icons: any[] = [
{ id: 1, name: 'caramel-swirl_2' },
{ id: 2, name: 'caramel-swirl-2' },
{ id: 3, name: 'caramel-swirl-3' },
];
onNgSubmit(form: NgForm) {
if (form.valid) {
console.log(form);
} else if (form.invalid) {
form.form.markAllAsTouched();
}
}
}

和您的模板：

<form class="donut-form" (ngSubmit)="onNgSubmit(formDonut)" #formDonut="ngForm">
<label>
<span> Name :</span>
<input
type="text"
name="name"
class="input"
minlength="5"
required
ngModel
#name="ngModel"
/>
<ng-container *ngIf="name.touched && name.invalid">
<div class="donut-form-error" *ngIf="name.errors?.required">
The name is required
</div>
<div *ngIf="name.errors?.minlength">Put more then 5 character</div>
</ng-container>
</label>
<label>
<span> icons :</span>
<select
name="icon"
class="input input--select"
required
ngModel
#icon="ngModel"
>
<option *ngFor="let icon of icons" [ngValue]="icon.name">
{{ icon.name }}
</option>
</select>
<ng-container *ngIf="icon.touched && icon.invalid">
<div class="donut-form-error" *ngIf="icon.errors?.required">
The icons is required
</div>
</ng-container>
</label>
<label>
<span> Price :</span>
<input
type="number"
name="price"
class="input"
required
ngModel
#price="ngModel"
/>
<ng-container *ngIf="price.touched && price.invalid">
<div class="donut-form-error" *ngIf="price.errors?.required">
The price is required
</div>
</ng-container>
</label>
<div class="donut-form-promos">
<span>Promo:</span>
<div class="donut-form-promos-choices">
<input
type="radio"
name="promo"
[value]="'newPromo'"
rquired
[ngModel]="defaultPromo"
#promo="ngModel"
/><span>New</span>
<input
type="radio"
name="promo"
[value]="'limitedPromo'"
required
[ngModel]="defaultPromo"
#promo="ngModel"
/><span>Limited</span>
<input
type="radio"
name="promo"
[value]="'clubPromo'"
required
[ngModel]="defaultPromo"
#promo="ngModel"
/><span>Club memeber</span>
<input
type="radio"
name="promo"
[value]="undefined"
required
[ngModel]="defaultPromo"
#promo="ngModel"
[checked]="'checked'"
/><span>None</span>
</div>
</div>
<label class="textaria-section">
<span> Description :</span>
<textarea
name="description"
class="input input--texteria"
required
ngModel
></textarea>
</label>
<button type="submit" class="btn btn--green">Create</button>
<pre> {{ formDonut.form.value | json }}</pre>
</form>