Угловая 2/4/5/6 [(ngModel)] Радиокнопка не проверена на кнопке назад
Я новичок в Angular 2.
У меня есть форма с переключателями. Когда я нажимаю кнопку "Сохранить", она переходит на следующую страницу. Оттуда, если я нажму кнопку "Назад", выбранный переключатель не проверяется.
Я получаю данные из файла JSON для создания имени и значения переключателей.
Вот мой HTML-файл
<div class="card--content" *ngFor="let item of data; let i=index;">
<input type="radio" #chocolate="ngModel" required name="chocolate" [(ngModel)]="chocolateType" [value]="item" id="select-{{i}}" checked="checked">
<label for="select-{{i}}"></label>
<img src="{{item.img}}" class="img-round" />
<p class="text3">{{item.title}}</p>
</div>
Вот мой файл TypeScript:
Component({
selector: 'app-select-chocolate',
templateUrl: './select-chocolate.component.html',
styleUrls: ['./select-chocolate.component.scss']
})
export class SelectChocolateComponent implements OnInit {
chocolateType: string;
form: any;
data;
constructor(private router: Router, private formDataService: FormDataService, private userService: UserService) { }
ngOnInit() {
document.body.className = "bg-gray01";
this.userService.getChocolates()
.subscribe(
data => {
this.data = data;
},
error => {
console.log(error);
}
)
//this.chocolateType = this.formDataService.getChocolate();
}
ngOnDestroy() {
document.body.className = "";
}
save(form: any): boolean {
if (!form.valid) {
return false;
}
this.formDataService.setChocolate(this.chocolateType);
return true;
}
goToNext(form: any) {
if (this.save(form)) {
// Navigate to the address page
this.router.navigate(['/select-ingredients']);
}
}
}
Я также создал сервис, чтобы создать formData
выбрано пользователем:
{
"finger": "4",
"chocolate": {
"id": 1,
"title": "Milk Chocolate",
"img": "http://localhost:3000/images/milk-chocolate.png"
},
"ingredient": {},
"message": "",
"packaging": ""
}
formDataService
Сервис вызывается после нажатия кнопки сохранения. В конце я должен опубликовать все formData
,
Пожалуйста, сориентируйтесь, что я делаю не так.