Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.04.2019, 11:37
Новичок на форуме
Отправить личное сообщение для YouNone Посмотреть профиль Найти все сообщения от YouNone
 
Регистрация: 25.04.2019
Сообщений: 2

Асинхронные данные не видны в форме
День добрый, вот моя проблема.
В проекте 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);
		});
	}
}
Ответить с цитированием
  #2 (permalink)  
Старый 25.04.2019, 12:16
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

либо
<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);
		});
Ответить с цитированием
  #3 (permalink)  
Старый 25.04.2019, 12:19
Новичок на форуме
Отправить личное сообщение для YouNone Посмотреть профиль Найти все сообщения от YouNone
 
Регистрация: 25.04.2019
Сообщений: 2

[ngModel] -- в 6 версии deprecated, а в 7 -- закрыт.
Второй вариант да, его и прицепил, но как-то не изящно. :о(
Ответить с цитированием
  #4 (permalink)  
Старый 25.04.2019, 12:24
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
вывести данные в нужной форме Salvat Events/DOM/Window 1 17.02.2017 08:31
Как отобразить данные из базы на форме? ascherbakov AJAX и COMET 2 12.03.2014 15:55
Стереть данные в форме rudejah Элементы интерфейса 5 23.04.2012 21:24
Не совсем обычный фрейм и выезжающий текст при наводе на картинку. amaz245 Элементы интерфейса 35 25.12.2010 17:29
Как собрать данные в форме? xela1980 jQuery 1 26.12.2009 14:22