Angular 5: Как использовать одну группу форм в разных компонентах? - PullRequest
Новая
       21

Angular 5: Как использовать одну группу форм в разных компонентах?

0 голосов
/ 09 октября 2019

Следующий вопрос касается Angular 5.

У меня есть компонент формы MyForm.Form.ts, который отображается в нескольких родительских компонентах. Однако есть два элемента управления формой (назовем их agency_email и delivery_details), которые должны отображаться только в двух родительских формах и должны проверяться только в том случае, если они показаны. Как этого достичь?

1 Ответ

0 голосов
/ 09 октября 2019

Вы должны передать, какой form controls показать от родителя. Затем в хуке form component OnChange на основе входных данных от родителя вы можете обновить валидации.

Объявите компонент @Input in form, чтобы перехватить доступные firmControl для отображения. 

@Input() availableOptions: any = {
    agency_email: true,
    delivery_details: true
};

Затем в OnChange на основе входных данных обновите проверки. 

ngOnChanges(changes: SimpleChanges) {
    if (changes.availableOptions) {
        if (this.availableOptions.agency_email) {
            this.form.get("agency_email").setValidators([Validators.required]);
        } else {
            this.form.get("agency_email").setValidators([]);
        }
        this.form.get("agency_email").updateValueAndValidity();

        if (this.availableOptions.delivery_details) {
            this.form.get("delivery_details").setValidators([Validators.required]);
        } else {
            this.form.get("delivery_details").setValidators([]);
        }
        this.form.get("delivery_details").updateValueAndValidity();
    }
}

И используйте availableOptions в html до show/hide formCOntrols.

Вот демоверсия .

...