[英]Angular: radio button [checked] not set with template reference variable
As the title suggests, I have a scenario where, if the "Select All" radio button is checked, it must check all of the radio buttons in the columns below.正如标题所暗示的,我有一个场景,如果“全选”单选按钮被选中,它必须选中下面列中的所有单选按钮。 Unfortunately, this is not working.
不幸的是,这不起作用。
Here is a sample:这是一个示例:
<table>
<thead>
<th>Role</th>
<th colspan="3">Access</th>
</thead>
<tbody>
<tr>
<td>Select All</td>
<td>
<input #none type="radio" name="access0" value="allNone"/>
<label>None</label>
</td>
<td>
<input #readOnly type="radio" name="access0" value="allReadOnly"/>
<label>Read Only</label>
</td>
<td>
<input #full type="radio" name="access0" value="AllFull"/>
<label>Full</label>
</td>
</tr>
<tr>
<td>Admin</td>
<td>
<input type="radio" name="access1" value="None" [checked]="none.checked"/>
<label>None</label>
</td>
<td>
<input type="radio" name="access1" value="ReadOnly" [checked]="readOnly.checked"/>
<label>Read Only</label>
</td>
<td>
<input type="radio" name="access1" value="Access" [checked]="full.checked"/>
<label>Full</label>
</td>
</tr>
<tr>
<td>Sales Person</td>
<td>
<input type="radio" name="access2" value="None" [checked]="none.checked"/>
<label>None</label>
</td>
<td>
<input type="radio" name="access2" value="ReadOnly" [checked]="readOnly.checked"/>
<label>Read Only</label>
</td>
<td>
<input type="radio" name="access2" value="Access" [checked]="full.checked"/>
<label>Full</label>
</td>
</tr>
</tbody>
</table>
And here is a link to a sample StackBlitz.这是指向示例 StackBlitz 的链接。
I am not sure why, for instance, all of the 'None' radio buttons are not checked when setting the [checked]
as follow:我不知道为什么,例如,设置
[checked]
时所有的“无”单选按钮都没有被[checked]
,如下所示:
<input type="radio" name="access1" value="None" [checked]="none.checked"/>
disclamer it's not an answer, is an answer to a comment about use [(ngModel)] into a ReactiveForm.免责声明,这不是答案,是对有关将 [(ngModel)] 用于 ReactiveForm 的评论的答案。
@monstertjie_za, the doc indicate that you don't use in the same input TOGETHER formControlName and [(ngModel)], Not that you can not use a input into a reactive form. @monstertjie_za,该文档表明您不要在同一个输入中同时使用 formControlName 和 [(ngModel)],并不是说您不能将输入用于反应式表单。 Imagine your example.
想象一下你的例子。 You has a reactiveForm like
你有一个像
form=new FormGroup({
accessAdmin:new FormControl(),
accessPersonal:new FormControl()
})
But you want allow the user a rapid selection但是你想让用户快速选择
<form [formGroup]="form">
<!--a input that not belong to the ReactiveForm that use [(ngModel)]-->
<div>
<label><input type="radio" value="None" [ngModelOptions]="{standalone:true}"
[ngModel]="access" (ngModelChange)="change($event)"/>None</label>
<label><input type="radio" value="ReadOnly" [ngModelOptions]="{standalone:true}"
[ngModel]="access" (ngModelChange)="change($event)"/>ReadOnly</label>
<label><input type="radio" value="Access" [ngModelOptions]="{standalone:true}"
[ngModel]="access" (ngModelChange)="change($event)"/>Access</label>
</div>
<!--inputs that belong to our formGroup-->
<div>
<label><input type="radio" value="None" formControlName="accessAdmin"/>None</label>
<label><input type="radio" value="ReadOnly" formControlName="accessAdmin"/>ReadOnly</label>
<label><input type="radio" value="Access" formControlName="accessAdmin"/>Access</label>
</div>
<div>
<label><input type="radio" value="None" formControlName="accessPersonal"/>None</label>
<label><input type="radio" value="ReadOnly" formControlName="accessPersonal"/>ReadOnly</label>
<label><input type="radio" value="Access" formControlName="accessPersonal"/>Access</label>
</div>
</form>
<pre>
{{form?.value|json}}
</pre>
where you has a function like你有这样的功能
change(value) {
this.form.get('accessAdmin').setValue(value);
this.form.get('accessPersonal').setValue(value);
}
You can see the stackblitz demo你可以看到stackblitz演示
You see that we use a input with [(ngModel)] to help the user to change the value of form.accessAdmin and form.accessPersonal.您会看到我们使用带有 [(ngModel)] 的输入来帮助用户更改 form.accessAdmin 和 form.accessPersonal 的值。 It is not related with the link you show me and is perfectly formed -even I'll say that it's good to help the user-
它与您向我展示的链接无关,并且格式完美-即使我会说帮助用户也很好-
you have to use ngModel
to update the radio button values like this -你必须使用
ngModel
来更新这样的单选按钮值 -
app.component.html
应用程序组件.html
<table>
<thead>
<th>Role</th>
<th colspan="3">Access</th>
</thead>
<tbody>
<tr>
<td>Select All</td>
<td>
<input type="radio" name="access0" value="allNone"
[(ngModel)]='none'/>
<label>None</label>
</td>
<td>
<input [(ngModel)]='readonly' type="radio" name="access0" value="allReadOnly"/>
<label>Read Only</label>
</td>
<td>
<input [(ngModel)]='full' type="radio" name="access0" value="AllFull"/>
<label>Full</label>
</td>
</tr>
<tr>
<td>Admin</td>
<td>
<input type="radio" name="access1" [value]="1" [checked]='none'/>
<label>None</label>
</td>
<td>
<input type="radio" name="access1" value="ReadOnly" [checked]='readonly'/>
<label>Read Only</label>
</td>
<td>
<input type="radio" name="access1" value="Access" [checked]="full"/>
<label>Full</label>
</td>
</tr>
<tr>
<td>Sales Person</td>
<td>
<input type="radio" name="access2" value="None" [checked]="none"/>
<label>None</label>
</td>
<td>
<input type="radio" name="access2" value="ReadOnly" [checked]="readonly"/>
<label>Read Only</label>
</td>
<td>
<input type="radio" name="access2" value="Access" [checked]="full"/>
<label>Full</label>
</td>
</tr>
</tbody>
</table>
app.component.ts
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
public none=false;
public readonly=false;
public full=false;
}
Check for changes:检查更改:
<table (click)="cd.detectChanges()">
<thead>
<th>Role</th>
<th colspan="3">Access</th>
</thead>
<tbody>
<tr>
<td>Select All</td>
<td>
<input #none type="radio" name="access0" value="allNone"/>
<label>None</label>
</td>
<td>
<input #readOnly type="radio" name="access0" value="allReadOnly"/>
<label>Read Only</label>
</td>
<td>
<input #full type="radio" name="access0" value="AllFull"/>
<label>Full</label>
</td>
</tr>
<tr>
<td>Admin</td>
<td>
<input type="radio" name="access1" [value]="None" [checked]="none.checked"/>
<label>None</label>
</td>
<td>
<input type="radio" name="access1" value="ReadOnly" [checked]="readOnly.checked"/>
<label>Read Only</label>
</td>
<td>
<input type="radio" name="access1" value="Access" [checked]="full.checked"/>
<label>Full</label>
</td>
</tr>
<tr>
<td>Sales Person</td>
<td>
<input type="radio" name="access2" value="None" [checked]="none.checked"/>
<label>None</label>
</td>
<td>
<input type="radio" name="access2" value="ReadOnly" [checked]="readOnly.checked"/>
<label>Read Only</label>
</td>
<td>
<input type="radio" name="access2" value="Access" [checked]="full.checked"/>
<label>Full</label>
</td>
</tr>
</tbody>
</table>
And TS:和 TS:
import {ChangeDetectorRef, Component} from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
constructor(protected cd: ChangeDetectorRef){}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.