Реактивная форма с динамическим изменением данных из компонента - PullRequest
Новая
       26

Реактивная форма с динамическим изменением данных из компонента

0 голосов
/ 10 октября 2019

Я настраиваю реактивную форму в угловом 6, где у меня есть 2 поля ввода (один вход является необязательным входом) и кнопка отправки. Если я ввожу значение в одно поле ввода и нажимаю «Отправить», мне нужно заполнить другое поле ввода, установив соответствующее значение со стороны компонента. Если я ввожу значения в оба поля ввода, то вызывается другая функция. Если да, то как возможно двустороннее связывание данных в элементах управления формой? Я попытался использовать ngModel, который работает не так, как ожидалось, и из ответов на stackoverflow узнал, что использование ngmodel с элементами управления формой скоро станет устаревшим. Как я могу добиться того же, если так? Ниже приведен фрагмент кода, который я использую:

Component.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>

спасибо заранее.

1 Ответ

0 голосов
/ 10 октября 2019

Использование valueChanges для доступа к текущим изменениям и использование setValue func для установки значения на вход.

в файле ts try: 

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>
...