Javascript-форум (https://javascript.ru/forum/)
-   Angular.js (https://javascript.ru/forum/angular/)
-   -   Асинхронные данные не видны в форме (https://javascript.ru/forum/angular/77383-asinkhronnye-dannye-ne-vidny-v-forme.html)

YouNone 25.04.2019 11:37

Асинхронные данные не видны в форме
 
День добрый, вот моя проблема.
В проекте Angular 7 при переходе на страницу компонента производится асинхронное подчитывание данных, которое выводятся в инпуты. После получения данных они корректно отображаются в полях ввода, но при отправке на сервер получается что значения value пустые. Кроме того, несмотря то что значения отображены в полях валидаторы выдают ошибки словно поля пустые. Если поставить курсор в поле ввода и добавить символ, новое полное значение становится доступным для компонента поля ввода и валидатора.
Подскажите как правильно воткнуть данные в форму.

<form [formGroup]="emplForm" (ngSubmit)="FormSubmit()">
<mat-form-field>
	<mat-label>Логин</mat-label>
	<input formControlName="login" matInput [value]="user.login">
</mat-form-field>
<mat-form-field>
	<mat-label>Ф.И.О.</mat-label>
	<input formControlName="full_name" matInput [value]="user.full_name">
</mat-form-field>
<button type="submit" mat-flat-button color="primary">Сохранить</button>
<form/>



user: IUserCard = new UserCard(<IUserCard>{});
emplForm: FormGroup;

constructor() {
     public route: ActivatedRoute,
     public router: Router,
}
ngOnInit() {
    this.emplForm = new FormGroup({
       	full_name: new FormControl(null, [Validators.required]),
	login: new FormControl(null, [Validators.required]),

    });
    	this.ctrl = this.emplForm.controls;
	this.currId = this.route.snapshot.queryParams["id"];

        if (this.currId !== undefined) {
	    this.userService.getUser(+this.currId)
		.subscribe((data: IUserCard) => {
			this.user = new UserCard(data);
		});
	}
}

destus 25.04.2019 12:16

либо
<input formControlName="login" matInput [ngModel]="user.login" />

либо так
<input formControlName="login" matInput />
this.userService.getUser(+this.currId)
		.subscribe((data: IUserCard) => {
			const user = new UserCard(data);
            this.emplForm.get('login').setValue(user.login);
            this.emplForm.get('full_name').setValue(user.full_name);
		});

YouNone 25.04.2019 12:19

[ngModel] -- в 6 версии deprecated, а в 7 -- закрыт.
Второй вариант да, его и прицепил, но как-то не изящно. :о(

destus 25.04.2019 12:24

Цитата:

[ngModel] -- в 6 версии deprecated, а в 7 -- закрыт.
нет, пока работает даже в 7 версии https://stackblitz.com/edit/angular-...p.component.ts
Но вообще да, раз ты выбрал reactive forms то и иди этой дорогой.


Часовой пояс GMT +3, время: 00:06.