Угловая 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,

Пожалуйста, сориентируйтесь, что я делаю не так.

0 ответов

Другие вопросы по тегам