Angular: получить доступ к спроектированной FormGroup - PullRequest
Новая
       7

Angular: получить доступ к спроектированной FormGroup

3 голосов
/ 17 октября 2019

Я хочу создать базовый компонент формы, который будет иметь дополнительный контроль над всеми другими формами.

Например, я хочу проверить, является ли форма грязной, когда пользователь хочет закрыть форму, илиnot.

Вот мой пример формы базового компонента: 

@Component({
  selector: 'my-modal-form',
  templateUrl: './modal-form.component.html',
  styleUrls: ['./modal-form.component.scss']
})
export class ModalFormComponent implements OnInit, AfterContentInit {

  @ContentChild(FormGroup, { static: false }) usersForm: FormGroup;

  constructor() { }

  ngOnInit(): void {
    console.log(this.usersForm);
  }
  ngAfterContentInit() {
    console.log(this.usersForm);
  }
}

А вот пример использования: 

<my-modal-form>
  <form [formGroup]="profileForm">
    <input type="text" formControlName="firstName" />
    <input type="text" formControlName="lastName" />
  </form>
</my-modal-form>

Так что оба вызова console.log дают мне undefined. Здесь я хочу получить доступ к экземпляру FormGroup, чтобы проверить, грязный он или нет.

Вопрос в том, как правильно получить доступ к спроектированной форме (FormGroup)?

Ответы [ 2 ]

2 голосов
/ 17 октября 2019

Использование ControlContainer вместо этого, кажется, работает *:

Stackblitz 

import { Component, ContentChild, OnInit, AfterContentInit } from '@angular/core';
import { ControlContainer, FormGroup } from '@angular/forms'

@Component({
  selector: 'modal-form',
  template: `
    <ng-content></ng-content>
  `
})
export class ModalFormComponent implements OnInit, AfterContentInit {

  @ContentChild(ControlContainer, { static: true }) formGroup: FormGroup;

  constructor() { }

  ngOnInit(): void {
    console.log(this.formGroup.value); // null
  }

  ngAfterContentInit() {
    console.log(this.formGroup.value); // {firstName: "", lastName: ""}
    this.formGroup.valueChanges.subscribe(console.log)
  }
}

* предостережение - я не пробовал этот подход, поэтому не могу оценить его жизнеспособность,Возможно, ОП сможет прокомментировать / ответить на сообщение, если это возможно?

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

Вы нигде не инициализировали usersForm, поэтому вы определены. Когда я проверяю ваш шаблон, у вас есть profileForm вместо usersForm.

Вы должны исправить это <form [formGroup]="usersForm"> вместо <form [formGroup]="profileForm">

...