Как я могу сделать "twoDataBinding" с formControlName?похож на модель нг

Question

Я устанавливаю модель с помощью формы, но у меня проблема с установкой «MyModel» с формой

Это сделано для оптимизации работы с формами

public myModel = new MyModel();

this.myForm = this.formBuilder.group({
      firstName: new FormControl({
        value: this.myModel.firstName,
        disabled: false
      }),
      middleName: new FormControl({
        value: this.myModel.middleName,
        disabled: false
      }),
      lastName: new FormControl({
        value: this.myModel.lastName,
        disabled: false
      }),
      age: new FormControl({
        value: this.myModel.age,
        disabled: false
      })
    });

, когда я отправляю «submit» с кнопкой, которая показывает мне «this.myForm» с элементами, которые я добавил в форму, но кажется, что я не буду устанавливать соединение как «TwoDataBinding»«Я также не хочу делать этот код, так как считаю его очень избыточным

и

, когда речь идет о многих формах, и даже хуже, если вы решите изменить или реорганизовать атрибуты этого объекта

    this.myModel.firstName = this.myForm.controls['firstName'].value;
    this.myModel.lastName = this.myForm.controls['lastName'].value;
    this.myModel.middleName = this.myForm.controls['middleName'].value;
    this.myModel.age = this.myForm.controls['age'].value;

Вы можете увидеть полный код здесь: https://stackblitz.com/edit/form-model-hammer модели формы, если вы хотите внести изменения, вы можете поделиться FORK, спасибо:

также с целью избежать этого предупреждения на картинке

Answer 1

Если вы хотите использовать двухстороннее связывание, вы должны вместо этого использовать управляемые шаблоном формы .Он позволяет использовать ngModel для создания двусторонних привязок данных для чтения и записи значений управления вводом.

Принципы реактивных форм следует правилу «одностороннего»,при этом вы следуете неизменному методу управления состоянием ваших форм, так что между вашим шаблоном и логикой компонента существует большее разделение.Подробнее о преимуществах реактивных форм вы можете прочитать по ссылке выше.

Если вы считаете, что реактивные формы - это не то, что вам нужно, вам следует вернуться к использованию шаблонно-управляемых форм, как указано в первом абзаце.

Заметьте, вы не должны использовать ngModelс реактивными формами, поскольку это победит цель неизменности.

Однако, если вы планируете использовать реактивные формы, вы можете упростить свой код, сделав это вместо этого:

1)Инициализация и объявление ваших реактивных форм.

this.myForm = this.formBuilder.group({
  firstName: [{value: this.myModel.firstName, disabled: true}],
  middleName: [this.myModel.middleName],
  lastName: [this.myModel.Name],
  age: [this.myModel.age],
});

2) Получить данные реактивной формы:

// since the properties of myModel and myForm FormControl names are the same
this.myModel = {...this.myForm.value};

3) Обновить данные реактивной формы:

this.myForm.patchValue(this.myModel);

Answer 2

Вы должны прекратить использование ngModel с реактивными формами, так как это устарело. Вы можете упростить код, как показано ниже:

this.myModel.firstName= 'FIRST NAME';
    this.myForm = this.formBuilder.group({
      firstName:[{
        value: this.myModel ? this.myModel.firstName : '',
        disabled: false
      }],
      middleName: [{
        value: this.myModel ? this.myModel.middleName : '',
        disabled: false
      }],
      lastName: [{
        value: this.myModel ? this.myModel.lastName : '',
        disabled: false
      }],
      age:[{
        value: this.myModel ? this.myModel.age : '',
        disabled: false
      }]
    });

Прослушайте событие (ngOnSubmit) и напишите функцию для сохранения значений формы. Это может быть достигнуто следующим способом:

  save(myForm : any){
    let form = myForm as MyModel;
    console.log(form);
    form.otherProperties = 'nothing';
  }

Или:

  save(myForm : MyModel){
    let form = JSON.parse(JSON.stringify(myForm)); //for copy
    console.log(form);
    form.otherProperties = 'nothing';
    console.log( 'added a new property', form);
  }

А в вашем html:

<div>
  <form [formGroup]="myForm" (ngSubmit)='save(myForm.value)'>
    <label>
      <span>
        Fisrt name:
      </span>
      <input type="text" formControlName="firstName">
    </label>
    <label>
      <span>
        Middle name
      </span>
      <input type="text" formControlName="middleName">
    </label>
    <label>
      <span>
        Last name
      </span>
      <input type="text" formControlName="lastName">
    </label>
    <label>
      <span> Age: </span>
      <input type="number" formControlName="age">
    </label>
    <div style="display: block">
      <button (click)="onShowModel()">
        show model
      </button>
    </div>

    <div style="display: block">
      <button>
        set model from form
      </button>
    </div>
  </form>
</div>
<div>
  <p class="red"> from model : </p>
  <span class="red"> Model: {{myModel | json}}  {{nothing}}</span>

</div>

<div>
  <p class="blue"> from form, binding model : </p>
  <span class="blue"> Model: {{myForm.value | json}}</span>
</div>

Я также раздвоил ваш пример: Пример