Get the default value of select radio Angular 6

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.

Continue reading...