如何获取表单组值并将它们全部显示在父组件上

如何解决如何获取表单组值并将它们全部显示在父组件上

我有一个反应式表单，我正在 ngOninit 上的表单上绑定来自 db 的数据，并且还对表单控件和表单数组元素进行验证。

我有另一个表单，其中包含相同的信息供提交前审核，我可以使用 @input() 将这些值绑定到不同的组件中。

我希望每当我在表单内的任何表单控件或表单数组上更改任何内容时，它都应该反映在审核表单上。

我曾尝试在 ngOnInit 中订阅表单的 valueChange 事件，但每当我更改任何控件或表单数组值时它都不会命中。

---

请帮助我如何使用 valueChange 来在我更新主表单上的任何内容时更新表单上的所有表单控件和表单数组值。

解决方法

你能展示你的一些代码或发布你项目的 jsFiddle 吗？

如果我正确理解您的问题，这将是一个很好的方法：

在html中

<div [formGroup] = "formGroup">

    ... //all the other forms

    <mat-form-field>
        <input matInput type="number" formControlName="name" [(ngModel)] = "name">
    </mat-form-field>
</div>

在组件中：

import { Component,OnInit,ElementRef,ViewChild,Inject } from '@angular/core';
import { FormGroup,FormControl,Validators } from '@angular/forms';

formGroup!: FormGroup;
name!: number
... //all the other form properties

@ViewChild('input') input!: ElementRef;

  ngOnInit(): void {
    this.formGroup = new FormGroup({
      sequenceId: new FormControl(null,[Validators.pattern('//pattern for validation')]),});
  }

[(ngModel)] 在您在表单中编写时将表单的值与组件的 name 属性绑定。

我正在使用角材料的 <mat-form-field> 和 matInput。即使使用正常形式，这也应该有效

,

您能否尝试在 ngOnchange 生命周期方法中使用 valueChange 事件。如果您想将表单值传递给父组件，您可以使用 eventEmitter 或将 formData 作为行为主体 (RxJS) 并在每次更改时发布数据并订阅父组件中的表单数据。

,

我可以通过在 oninit 的父页面上添加以下代码行来更改表单上的值。以前我在主窗体上使用它。

@Input() 形式：任意； 类别：字符串；

this.form.get("category").valueChanges.subscribe(value => { this.category = 值;

})