如何以动态 angular 形式获取更改事件的值？

Question

在 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 发射器。

我已经在 ngOnit 上试过了，但它不起作用，也没有在控制台中产生任何结果。

ngOnit(){

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



}

编辑 1：

根据 Manzur Khan 的建议，我已将 formcreated 事件成功的值传递为 true，然后在 ngOnit 中使用这样的值来获取 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);
        });

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

Answer 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);
        });
}
})

Answer 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));

Answer 3

我还需要进一步优化这个结果，以便我只听特定的表单控件？？，我有一些不同的解决方案可以满足您的要求。

template.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 (ngModelChange)="modelChanged($event,input1.field_name)"[formControlName]="input1.field_name" [id]="input1.field_name" type="text"  placeholder="{{input1.title}}">
    </mat-form-field>   
   </div>
  </ng-container>
 </div>  
</form>

component.ts

 public modelChanged(ev, formName) {
   console.log('Jarvis Event', ev);
   console.log('control value', this.form.get(formName).value);
 }

Answer 4

我们可以使用 表单控件 对象在特定的动态表单 HTML 元素上创建事件。例如

this.form.controls["DynamicFormControlId"].valueChanges.subscribe(val => {

    });

如何以动态 angular 形式获取更改事件的值？

how to get values on change event in dynamic angular forms?

events

eventemitter

typescript

angular

angular-reactive-forms