Как передать данные многоразовой формы в angular?

Question

Я использую реактивную форму в angular 9. Я хотел бы иметь многоразовые формы. из-за этого я создал отдельный компонент для форм. но я не знаю, как передать значения формы другим компонентам без какого-либо щелчка в компоненте формы , потому что я хочу иметь отдельную кнопку для каждого компонента. Как я могу написать функцию отправки в app.component?

form.component. html

 <form [formGroup]="form">
      <div *ngFor="let prop of personProps">
        <label>{{ prop.label }}:</label>

        <div [ngSwitch]="prop.type">
          <input *ngSwitchCase="'text'" [type]="prop.type" [formControlName]="prop.key">
          <input *ngSwitchCase="'number'" [type]="prop.type" [formControlName]="prop.key">
        </div>

      </div>
    </form>

app.component. html

<dynamic-form [formDataObj]="person"></dynamic-form>
<button (click)="send()"> click </button>

Answer 1

имеют функцию внутри вашего динамика c -форма, подобная этой, для инициализации переменных формы

@Input() formData;
buildForm() {
    this.myForm = this.fb.group({
     ...
    });
  }

запускает форму сборки на ngOnInit и ngOnchanges

ngOnInit() {
    this.buildForm();
  }

ngOnChanges(changes: SimpleChanges) {
        if (changes.formData && !changes.formData.firstChange){
            this.buildForm();
        }
}

Теперь в вашем Компонент приложения

send() {
this. person = // your code here
}

Answer 2

просто используйте ссылочную переменную шаблона (#nameVariable)

<dynamic-form #myform [formDataObj]="person"></dynamic-form>
<button (click)="send(myform)"> click </button>

в функции send у вас есть все свойства publi c динамической формы, например, собственная переменная «form»

send(myform:any)
{
    if (myform.form.valid)
       console.log(myform.form.value)
}