Угловой 8: автоматическое отображение реактивной формы и данные элемента PatchValue Set

Question

Есть ли простой способ исправления угловой формы с помощью автоматического сопоставления? Я хочу взять урок и поместить в форму точно такие же имена членов. Я предпочитаю не писать, поскольку компания имеет много форм и старается держаться подальше от повторяющегося кодирования (сухой принцип) и т.д. 1006 *

Ошибка: Аргумент типа 'строка' не может быть назначен параметру типа '{[ключ: строка]: любой;} '

Answer 1

если модель формы и данные хотят, чтобы объект исправления имел одинаковые значения, попробуйте это.

this.editAddressForm.patchValue(this.addressMailingData);

Answer 2

Немного больше настроек:

customPatchValue(keys : string[], data: any, formgroup: FormGroup):

Параметры:

• keys: Массив строк, который вы хотите отобразитьзначения для группы форм
• data: объект, значения которого вы хотите установить для formGroup
• formGroup: группа форм, для которой вы хотите применить изменения

customPatchValue(keys: string[] = null, data: any, formGroup: FormGroup) {
  Object.keys(data).forEach(key => {
    if (!keys || keys.length == 0 || keys.some(x => x == key)) {
      formGroup.patchValue({ [key]: data[key] })
    } else {
      console.log("Non matching key", key);
    }
  });
}

Вот код TS:

import { Component } from "@angular/core";
import { FormGroup, FormControl } from "@angular/forms";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  form: FormGroup;

  obj: any = { name: "Prashant", surname: "Pimpale" };

  constructor() {
    this.form = new FormGroup({
      name: new FormControl(""),
      surname: new FormControl("")
    });
    // Here
    this.customPatchValue(['name'], this.obj, this.form);
  }

  customPatchValue(keys: string[] = null, data: any, formGroup: FormGroup) {
    Object.keys(data).forEach(key => {
      if (!keys || keys.length == 0 || keys.some(x => x == key)) {
        formGroup.patchValue({ [key]: data[key] })
      } else {
        console.log("Non matching keys", key);
      }
    });
    return formGroup;
  }
}

A Working Demo