Угловой resetForm не работает для вложенных объектов

Question

У меня есть форма, которая подтягивается несколько раз. Мне нужно иметь возможность сбрасывать представленный флаг в форме на false каждый раз, когда он появляется, чтобы удалить любые возможные сообщения об ошибках, которые могли остаться с прошлого раза.

Единственный способ, которым я обнаружил, чтобы установить отправленный флаг обратно в false, это использовать ngForm.resetForm(model) метод.

Это работает достаточно хорошо, за исключением того, что ngModel не привязывается ни к каким объектам, вложенным в модель верхнего уровня.

Дан следующий объект:

model: {
    firstName: 'John',
    contact: {
        lastName: 'Smith'
    }
}

и следующие входные данные:

<input type='text' name='firstName' [(ngModel)]='model.firstName' />
<input type='text' name='lastName' [(ngModel)]='model.contact.lastName' />

При первой загрузке формы все выглядит правильно.

Однако, если вы отправите форму, а затем позвоните this.myForm.resetForm(this.model)это не будет связывать model.contact.lastName, Это связывает model.firstName просто хорошо.

Я включил plunkr, который иллюстрирует проблему здесь.

Есть ли способ сбросить представленный флаг за пределами resetForm? Или кто-то может объяснить, почему model.contact.lastName поле не связывается правильно, когда вызывается resetForm?

Answer 1

При работе с формами важно помнить, что у него есть своя собственная модель, которая представляет форму и элементы управления в форме.

При использовании реактивных форм мы создаем эту "модель" с помощью FormBuilder.

При использовании шаблонно-управляемых форм эта "модель" создается для нас автоматически на основе элементов HTML с name приписывать.

Если вы посмотрите на сгенерированную модель, вы увидите, что свойства модели firstName а также lastName в соответствии с name приписывать.

Data Model: { "firstName": "John", "contact": { "lastName": "Smith" } }
Form's Model: { "firstName": "John", "lastName": "Smith" }

Вот почему он не может найти информацию... потому что его внутренняя модель формы НЕ соответствует вашей модели данных.

Попробуйте добавить это к вашему плункеру:

{{myForm.value | json}}<br/>

И вы увидите модель сгенерированной формы.

Вы можете добиться вложения, используя группу форм, например так:

  <input type='text' name='firstName' [(ngModel)]='model.firstName' /><br />
  <div ngModelGroup="contact">
  <input type='text' name='lastName' [(ngModel)]='model.contact.lastName' /><br />
  </div>
  <br />

Полученная модель формы затем соответствует вашей модели данных:

Data Model: { "firstName": "George", "contact": { "lastName": "Washington" } }
Form's Model: { "firstName": "George", "contact": { "lastName": "Washington" } }

Вот обновленный плункер: https://plnkr.co/edit/AqLxE7kJsCAVIOJHBJtt?p=preview