Я думаю, вы должны просто использовать то, что предлагает Angular:
- Шаблонные формы
- Реактивные формы
Выберите свой выбор.Мои личные предпочтения всегда связаны с реактивными формами, так как мы создали библиотеку под названием ngx-sub-form , которая дает нам множество преимуществ, таких как безопасность типов, разбиение формы на подформы, доступ к вложенным ошибкам иподробнее.
Чтобы создать то, что вы упомянули в своем посте, я бы сделал это следующим образом:
- Создайте «умный» компонент, который будет извлекать ваши имена (изсервер, локальное хранилище, хранилище и т. д.)
- Создайте компонент формы, который будет обрабатывать все части формы и возвращать ожидаемый объект только после того, как он будет сохранен
Вотдемонстрация того, как это сделать с помощью ngx-sub-form: https://stackblitz.com/edit/angular-knhgk5
Теперь давайте дадим некоторые подробности:
Прежде всего, давайте напишем наш интерфейс!
planner.interface.ts
export interface Planner {
name: string;
date: string;
}
Тогда давайте создадим умный компонент:
planner-container.component.ts
@Component({
selector: 'app-planner-container',
templateUrl: './planner-container.component.html',
styleUrls: ['./planner-container.component.css']
})
export class PlannerContainerComponent {
// those names would probably be fetched from a server
// but hardcoded for the sake of simplicity in the demo
public names: string[] = [
'Monicka',
'Hema',
'Ramesh',
'Madhavan',
'Aadhavan',
'Madhan',
'Prasanth',
];
public save(value: Planner): void {
// todo: do whatever you want here
// this method will be run only once the form is valid and sent
console.log('Form has been sent!');
console.log(value);
}
}
Интеллектуальный компонент будет отвечать за извлечение имен изобслуживать и управлять тем, что делать, когда форма действительна и отправлена.Вот и все.Он даже не должен знать, как реализована форма.
Самая важная часть: форма
planner-form.component.ts
@Component({
selector: 'app-planner-form',
templateUrl: './planner-form.component.html',
styleUrls: ['./planner-form.component.css']
})
export class PlannerFormComponent extends NgxSubFormComponent<Planner> {
@Input() public names: string[];
@Output() public save: EventEmitter<Planner> = new EventEmitter();
public getFormControls(): Controls<Planner> {
return {
name: new FormControl(null, [Validators.required]),
date: new FormControl(null, [Validators.required])
}
}
public send(): void {
this.save.emit(this.formGroupValues);
}
}
Несколько замечаний:
- Расширение компонента
NgxSubFormComponent - Это типобезопасно, потому что мы передаем наш тип родительскому классу
NgxSubFormComponent<Planner> - Мы определяем элементы управления формой, используя
getFormControls, предоставленный NgxSubFormComponent, там же мы можем передать наши валидаторы
Вид формы:
planner-form.component.html
<code><form [formGroup]="formGroup" (ngSubmit)="send()">
<select [formControlName]="formControlNames.name">
<option value="">Select someone</option>
<option *ngFor="let name of names" [value]="name">{{ name }}</option>
</select>
<input type="date" placeholder="Date" [formControlName]="formControlNames.date">
<button type="submit" [disabled]="formGroup.invalid">Save</button>
</form>
<!-- debug -->
(CF console for output once the form is saved!)
<hr>
<p>Form value:</p>
<pre>{{ formGroupValues | json }}
Ошибки формы
{{ formGroupErrors | json }} Примечания:
formGroup определяется библиотекой и просто дает вам доступ к ... группе форм! formControlNames дает вам доступ ко всем именам элементов управления формы, но безопасным способом и при неправильном написаниипеременная машинописного имени заберет его (при компиляции с AOT) formGroupValues дает вам доступ к значениям (конечный объект, который мы хотим отправить!) formGroupErrors дает вам доступ к ошибкам, чтобы вы могли условно отображать сообщения, основанные на этом
Чтобы узнать больше о ngx-sub-форме, посетите страницу Github https://github.com/cloudnc/ngx-sub-form и прочтите Readme, всеследует правильно объяснить множеством примеров в папке /src!
Демонстрационная версия вашего примера: https://github.com/cloudnc/ngx-sub-form
Редактировать:
Если вы хотите пойти дальше, я только что опубликовал пост в блоге, чтобы объяснить много вещей о формах и ngx-sub-форме здесь https://dev.to/maxime1992/building-scalable-robust-and-type-safe-forms-with-angular-3nf9