[英]Angular 13 Input Radio checked condition not working
I save in localstorage selectedKitchenId, and checked or selectedKitchenId === kitchen.id, if true selected radio.我保存在 localstorage selectedKitchenId 中,并选中或 selectedKitchenId === kitchen.id,如果为 true 则选择收音机。 Dont understand why not working checked conditions, i try strong tag display the same check everything works.
不明白为什么不工作检查条件,我尝试强标签显示相同的检查一切正常。 Tell me what could be the reason
告诉我可能是什么原因
<div class='row'>
<div *ngFor="let kitchen of kitchenTypes" class='col-lg-3'>
<div class="form-check form-check-inline">
<label class="form-check-label" for="{{kitchen.id}}">
<div class='kitchenTypeBg'>
<img src='{{kitchen.src}}' alt='' class='p-1 align-middle'>
</div>
</label>
<input
[checked]="selectedKitchenId === kitchen.id"
formControlName="kitchenType"
[value]='kitchen.id'
class="form-check-input" type="radio" id="{{kitchen.id}}"
>
<strong>{{selectedKitchenId === kitchen.id}}</strong>
</div>
</div>
</div>
<form #f="ngForm" (ngSubmit)='goToNextStep(f.form)'> <div *ngIf="submitted && f.invalid"> <span class='text-center'>Required form</span> </div> <div class='row'> <div *ngFor="let kitchen of kitchenTypes" class='col-lg-3'> <div class="form-check form-check-inline"> <label class="form-check-label" [for]="kitchen.id"> <div class='kitchenTypeBg'> <img [src]='kitchen.src' alt='' class='p-1 align-middle'> </div> </label> <input name="kitchenType" [checked]="selectedKitchenId === kitchen.id" [value]='kitchen.id' class="form-check-input" type="radio" [id]="kitchen.id" > <strong>{{selectedKitchenId === kitchen.id}}</strong> </div> </div> </div> <div class="d-grid"> <button type="submit" class="btn-block btn btn-outline-light buttonNext mx-auto mt-4 w-50"> Tęsti </button> <button [routerLink]="['/']" class='btn btn-block mx-auto buttonBack'> <i class="bi bi-arrow-left"></i> Grižti </button> </div> </form>
This is how easy template-driven is模板驱动就是这么简单
Fixed some best-practices for you为您修复了一些最佳实践
To get the values, just use like this on TS file:要获取值,只需在 TS 文件上使用:
goToNextStep(form) {
const {kitchenType} = form.values
}
It worked for me, Form Control pass value.它对我有用,表单控件传递值。 How is it done here link
这里是如何完成的链接
// Get selected Kitchen id
this.selectedKitchenId =
this.persistenceService.get('selectedKitchenId') ?? null;
initializeForm(): void {
this.form = this.formBuilder.group({
kitchenType: new FormControl(this.selectedKitchenId, Validators.required),
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.