Как настроить элемент формы Angular2, управляемый шаблоном, с двусторонней привязкой, а также проверку формы на основе шаблона

Question

Как правильно настроить элемент формы Angular, управляемый шаблоном, чтобы иметь как проверку, управляемую шаблоном, так и двустороннюю привязку? Возможно ли это?

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

Когда я использую [(ngModel)]="city", а также #city="ngModel" в соответствии с приведенным ниже примером, я получаю следующую ошибку:

Ошибка : Невозможно присвоить значение "$ event" переменной шаблона "city". Переменные шаблона доступны только для чтения.

Настройка элемента:

<div class="form-group col-md-3 mr-3">
  <label
    [class.error-label]="!city1.valid && city1.touched"
    for="city"
    >City or Town*
  </label>
  <input
    type="text"
    id="city"
    ngModel
    name="city"
    required
    #city="ngModel"
    [(ngModel)]="city"
  />
  <span *ngIf="!city.valid && city.touched" class="error-text"
    >Please enter your City or Town</span
  >
</div>

Когда я не использую [(ngModel)]="city", я не получаю двустороннюю привязка. И когда я переименовываю свою локальную ссылку #city="ngModel" во что-то вроде #cityWhatever="ngModel", значение city равно undefined при отправке формы:

<form
 (ngSubmit)="onSubmit(personalDetails)"
 #personalDetails="ngForm"
>

Я использую Angular версию: " @ angular / common ":" ~ 9.1.11 "

Заранее спасибо!

Answer 1

попробуйте это и удалите ngModel

<input
 type="text"
 id="city"
 name="city"
 required
 #city="ngModel"
 [(ngModel)]="model.city"
/>
<span *ngIf="!city.valid && city.touched" class="error-text">
  Please enter your City or Town
</span>