时间戳

首页 > 解决方案 > 具有来自组件的动态数据更改的反应式表单

html - 具有来自组件的动态数据更改的反应式表单

问题描述

我在 Angular 6 中设置了一个反应式表单，其中我有 2 个输入框（一个输入是可选条目）和一个提交按钮。如果我在一个输入框中输入一个值并按下提交，我需要通过从组件端设置相应的值来填充另一个输入框。如果我在两个输入框中输入值，则会调用另一个函数。如果是这样，如何在表单控件中进行双向数据绑定？我尝试使用 ngModel，它没有按预期工作，并且从 stackoverflow 的答案中了解到，使用带有表单控件的 ngmodel 很快就会被弃用。如果是这样，我怎样才能达到同样的效果？下面是我正在使用的代码片段：

组件.ts： 

export class myComponent implements OnInit {

  converterForm: FormGroup;
  model: myModel = new MyModel();

  constructor(private formBuilder: FormBuilder, ) {
    this.myForm = this.formBuilder.group({
      vOne: [this.model.vOne],
      vTwo: [this.model.vTwo],
    });
  }
  
  onSubmit(searchInputs) {
    this.model.vTwo= "new";  //I need to edit the form value and reflect it in html.. two-waybinding
    this.converterForm.value.vOne = "edited";
    console.log("Submit called");
  }

}

.html 文件：

<div>
  <div>
    <form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm.value)">
      <div>
        <div>
          <mat-form-field>
            <input id="vOne" matInput formControlName="vOne" [(ngModel)]="model.vOne">
          </mat-form-field>
        </div>
		<div>
          <mat-form-field>
            <input id="vTwo" matInput formControlName="vTwo" [(ngModel)]="model.vTwo">
          </mat-form-field>
        </div>
      </div>
      <div>        
        <button mat-raised-button color="primary" type="submit" (click)="search()">
            <mat-icon aria-label="Search icon">search </mat-icon>
            Search
          </button>
      </div>
    </form>
  </div>

提前致谢。

标签： htmlangular6angular-reactive-formstwo-way-binding

解决方案

使用valueChanges访问实时更改，并使用setValue func 设置每个输入的值。

在 ts 文件中尝试：

export class myComponent implements OnInit {

    myForm: FormGroup;       

    constructor(private formBuilder: FormBuilder) {

        this.myForm = this.formBuilder.group({
            vOne: [null],
            vTwo: [null],
        });

        searchHandler();
    }

    searchHandler() {
        const searchInputs = {
            vOne: '',
            vTwo: '',
        };

        for (const propertyName in searchInputs) {
            const property = this.form.get(propertyName);
            property.valueChanges
                .subscribe((searchText) => {
                    // this.form.controls.vOne.setValue('whatever');
                    // this.form.controls.vTwo.setValue('whatever');
                    // searchText is what keypress in input tag
                });
        }
    }

    onSubmit() {
        // this.form.controls.vOne.setValue('whatever');
        // this.form.controls.vTwo.setValue('whatever');
    }

}

在 html 文件中尝试：

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
    <div>
      <mat-form-field>
        <input matInput formControlName="vOne">
      </mat-form-field>
    </div>
    <div>
      <mat-form-field>
        <input matInput formControlName="vTwo">
      </mat-form-field>
    </div>
</form>

推荐阅读