typescript - 如何在动态 Angular 表单中获取 change 事件的值？

在 component.ts 文件中，我正在像这样获取表单字段的值的 JSON 数组，并将其转换为 FormGroup 控件。这工作得非常好。

    getJsonForm(){
      let base_url = 'example.org'
      let getform_query = '/Base/formfieldsgenerator_get';
      let getform_endpoint = base_url.concat(getform_query);

     this.AllFormData = [];

        this.http.get('getform_endpoint'.'?tabpgrpid='+this.tabpgrpid+'&tabgrpname='+this.tabgrpname+'&usertabgrpname='+this.usertabgrpname+'&moduleid='+this.moduleid+'&templateid='+this.templateid+'&all_mod_data='+this.all_mod_data,{headers: this.headers}).subscribe(
        res => { 
         this.AllFormData = res;

                // this array is used to iterate in html side
               this.newfdata[element] = [];
               this.newfdata[element]['properties'] = [];


   Object.keys(res['com'][element]['schema']['properties']).forEach(inputKey => {
                      this.newfdata[element]['properties'].push(res['com'][element]['schema']['properties'][inputKey]);

                });

            // this is used to create form controls and form groups

                this.objectProps = Object.keys(res['com'][element]['schema']['properties']).map(prop => { 

          return Object.assign({}, { key: prop} , res['com'][element]['schema']['properties'][prop]);
          });

   for(let prop of Object.keys(res['com'][element]['schema']['properties'])) {

          formGroup[prop] = new FormControl(res['com'][element]['schema']['properties'][prop].value || '', this.mapValidators(res['com'][element]['schema']['properties'][prop].validation));

                }
        });

      this.form = new FormGroup(formGroup);
          }); 
}

现在在 components.html 这边，我正在像这样使用数组来生成动态表单。这也运行良好。

<form (ngSubmit)="custom_submit(form.value)" [formGroup]="form" >
         <div *ngFor="let input1 of newfdata[tabname].properties">   
                <ng-container *ngIf="input1.type=='string'">
                                <div>
                                     <mat-form-field>
                                     <input matInput  [formControlName]="input1.field_name" [id]="input1.field_name" type="text"  placeholder="{{input1.title}}">
                                     </mat-form-field>   
                                </div>
                            </ng-container>
         </div>  
</form>

现在我想根据前面表单字段的变化来更改一个表单字段的值。为此，我无法订阅表单组变量的 valueChanges 发射器。

我已经在 ngOnInit 上尝试过这个，但它不起作用，并且在控制台中没有产生任何结果。

ngOnit(){

   this.form.valueChanges.subscribe(val => {
                    this.formattedMessage = 'My changed values for is ${val}.';
                    console.log(this.formattedMessage);
                  });



}

编辑 1 ：

在 Manzur Khan 的建议下，我已将值传递为 true，以表示 formcreated 事件的成功，然后在 ngOnInit 中像这样使用该值以获取 onchange 事件：

      this.form = new FormGroup(formGroup);
      this.dataService.change_current_form_created("true");

以及在 NgonIt

this.dataService.last_form_craeted_message.subscribe(data => {
  if(data=="true") {
    this.form.valueChanges.subscribe(val => {
         this.formattedMessage = 'My changed values for is ${val}.';
            console.log(this.formattedMessage);
        });
}
});

现在我可以在控制台记录更改事件，但无法获取 $ {val} 的分辨率。

编辑 2 ：

由于 val 是对象，我无法以某种方式解析 $ {val}，我只是做了

   this.form.valueChanges.subscribe(val => {
            console.log('the changed value is',val);
        });

它给了我所有给定表单组的值。我仍然需要进一步优化这个结果，以便我只监听特定的表单控件。但它为我指明了一条道路。谢谢大家。

答案＃1

这是因为你在表单出现之前就监听了表单的值变化（因为它在异步内部）。

你可以尝试类似这样的东西

首先声明一个 Observable

formCreated: Subject<boolean> = new Subject();

然后在你的表单代码中

this.form = new FormGroup(formGroup);
this.formCreated.next(true)

然后在你的 ngOnInit 中

this.formCreated.subscribe(data => {
  if(data) {
    this.form.valueChanges.subscribe(val => {
         this.formattedMessage = 'My changed values for is ${val}.';
            console.log(this.formattedMessage);
        });
}
})

答案＃2

而不是

formGroup[prop] = new FormControl(res['com'][element]['schema']['properties'][prop].value || '', this.mapValidators(res['com'][element]['schema']['properties'][prop].validation));

尝试向表格添加控件，这对我有效。你可以使用 form.addControl 来实现：

formGroup.addControl(prop, new FormControl(res['com'][element]['schema']['properties'][prop].value || '', this.mapValidators(res['com'][element]['schema']['properties'][prop].validation));