获取 select radio Angular 6 的默认值 [英] Get the default value of select radio Angular 6
问题描述
我有这个映射用户 *------------------------1 职业.我想修改一位用户.所以我从 list-users.component.html 中选择一个，我将被重定向到 modify-user.component.html.
以下是所需的文件:
modify-user.component.html
<div *ngFor='let pro of pross;让 i = 索引'><标签><输入类型=收音机"id="pro.id"选中=pro.selected"名称=亲"[(ngModel)]="this.editForm.pro"(change)='radioChecked(pro.id, i)'[价值]="pro.libelle"><span></span><span class="check"></span><span class="box"></span>{{pro.libelle}}
<p>==>{{selectedProfessionRadio}}</p><button class="btn btn-success">更新</button></表单>
modify-user.component.ts
导出类 ModifyUserComponent 实现 OnInit{私人选择的专业电台；专业库:字符串；编辑表格:表格组；usrId:字符串；职业:职业[] =[{id: 1, libelle: "Engineer", selected: false},{id: 2, libelle: "Student", selected: false},];radioChecked(id, i, pro){this.professions.forEach(pro=>{if(pro.id !== id){pro.selected = false;}别的{pro.selected = true;}})this.userService.getProfessionById(id).subscribe(data =>{控制台日志(数据)；pro = 数据作为专业；localStorage.removeItem("ProfessionLibelle");localStorage.setItem("ProfessionLibelle", pro.libelle);},错误=>控制台日志(错误))；this.selectedProfessionRadio = localStorage.getItem("ProfessionLibelle");}构造函数(私有formBuilder:FormBuilder，私有路由器:路由器，私有userService:UserService){}ngOnInit(){让 userId = localStorage.getItem("editUserId");this.usrId = localStorage.getItem("editUserId");this.userService.getProfessionLibelleByIdUser(+userId).subscribe(data =>{控制台日志(数据)；让 pro = 数据作为字符串；this.professionLib = pro;localStorage.removeItem("ProfessionLibe");localStorage.setItem("ProfessionLibe", this.professionLib);},错误=>控制台日志(错误))；this.selectedProfessionRadio = localStorage.getItem("ProfessionLibe");this.editForm = this.formBuilder.group({ID: []，名称:['', Validators.required],亲:[this.selectedProfessionRadio，Validators.required]});this.userService.getUserId(+userId).subscribe( data =>{this.editForm.patchValue(data);});}}我的问题是，在重定向到修改用户后，我通常得到第一个职业(这是错误的)，就像这里描述的那样.
你能告诉我我错过了什么吗?非常感谢.
您共享的代码片段缺少一些信息并包含一些错误.我能够在 stackblitz 上重新创建它，希望它捕获的是您正在尝试实现.
在 Angular 中使用表单时，不建议混合使用 模板驱动表单 和 反应式表单.在您的情况下，这导致了错误:
ngModel 不能用于使用父 formGroup 指令注册表单控件.尝试使用formGroup 的合作伙伴指令formControlName"代替另外，editForm.item也会报错，因为item没有在editForm
I have this mapping User *------------------------1 Profession.
I'd like to modify one user.
So I select one from list-users.component.html, I'll be redirected to modify-user.component.html.
Bellow are the required files:
modify-user.component.html
<form [formGroup]="editForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="name">Name</label>
<input type="text" formControlName="name" placeholder="Name" name="name" class="form-control" id="name">
</div>
<div *ngFor='let pro of professions; let i = index'>
<label>
<input type="radio"
id="pro.id"
checked="pro.selected"
name="pro"
[(ngModel)]="this.editForm.pro"
(change)='radioChecked(pro.id, i)'
[value]="pro.libelle">
<span></span>
<span class="check"></span>
<span class="box"></span>
{{pro.libelle}}
</label>
</div>
<p>==> {{selectedProfessionRadio}}</p>
<button class="btn btn-success">Update</button>
</form>
modify-user.component.ts
export class ModifyUserComponent implements OnInit
{
private selectedProfessionRadio;
professionLib: string;
editForm: FormGroup;
usrId: String;
professions: Profession[] =
[
{id: 1, libelle: "Engineer", selected: false},
{id: 2, libelle: "Student", selected: false},
];
radioChecked(id, i, pro)
{
this.professions.forEach(pro=>
{
if(pro.id !== id)
{
pro.selected = false;
}
else
{
pro.selected = true;
}
})
this.userService.getProfessionById(id).subscribe(data =>
{
console.log(data);
pro = data as Profession;
localStorage.removeItem("ProfessionLibelle");
localStorage.setItem("ProfessionLibelle", pro.libelle);
},error => console.log(error));
this.selectedProfessionRadio = localStorage.getItem("ProfessionLibelle");
}
constructor(private formBuilder: FormBuilder, private router: Router, private userService: UserService) {}
ngOnInit()
{
let userId = localStorage.getItem("editUserId");
this.usrId = localStorage.getItem("editUserId");
this.userService.getProfessionLibelleByIdUser(+userId).subscribe(data =>
{
console.log(data);
let pro = data as string;
this.professionLib = pro;
localStorage.removeItem("ProfessionLibe");
localStorage.setItem("ProfessionLibe", this.professionLib);
},error => console.log(error));
this.selectedProfessionRadio = localStorage.getItem("ProfessionLibe");
this.editForm = this.formBuilder.group
({
id: [],
name: ['', Validators.required],
pro: [this.selectedProfessionRadio, Validators.required]
});
this.userService.getUserId(+userId).subscribe( data =>
{
this.editForm.patchValue(data);
});
}
}
My problem is that after redirecting to modify-user, I got usually the first profession (which is wrong), exactly like described by this.
Could you please tell me what I missed? Thanks a lot.
The code snippet you share lack some information and contains some errors. I was able to recreate it on stackblitz, hope it captures was you're trying to achieve.
When working with forms in Angular, it is not recommended to mix template driven forms and reactive forms. In your case, this resulted in the error:
ngModel cannot be used to register form controls with a parent formGroup directive. Try using
formGroup's partner directive "formControlName" instead
Also, editForm.item will result in an error, because item is not defined in the form group editForm
这篇关于获取 select radio Angular 6 的默认值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
