Angular form * ngfor с переменной шаблона и двухсторонней привязкой - PullRequest
Новая
       5

Angular form * ngfor с переменной шаблона и двухсторонней привязкой

0 голосов
/ 15 марта 2020

Я просмотрел несколько постов с такой проблемой, но не нашел решения.

description:

  • Все показано с последним значением объекта "профессией" на init (model.overview: IOverview)
  • Привязка, кажется, работает, когда я ее изменяю.
  • Переменная шаблона не работает, она будет красной (когда любое поле недопустимо) для всех или зеленой для все остальное ...

html: 

<div *ngFor="let item of objectKeys(model.overview)">
    <div class="col form-group">
        <label for="item">{{item}}</label>
        <input type="text" class="form-control" id="item" required [(ngModel)]="model.overview[item]" name="item"
            #inputmodel="ngModel" #spy>
        <div [hidden]="inputmodel.valid || inputmodel.pristine" class="alert alert-danger">
            {{spy.className}}
        </div>
    </div>
</div>

код: 

model = new Hero('uuid', this.overview);
objectKeys(obj) {
    return Object.keys(obj);
}

Результат Загрузка страницы: result: Результат, когда я редактирую некоторые поля ввода: result when I input some fields:

Где я go не прав здесь?

EDIT1: Вот результат html: http://codebin.herokuapp.com?s=5e6e7688a569680004000006

EDIT2: добавление исходного изображения при загрузке страницы (зеленый)

1 Ответ

0 голосов
/ 15 марта 2020

Решил проблему, используя uni-diractional binding {{}} и индекс i. Спасибо @pero_hero за помощь в поиске простого решения!

Вот окончательный код: 

<div *ngFor="let item of objectKeys(model.overview); let i = index">
      <div class="col form-group">
        <label for=item{{i}}>{{item}}</label>
        <input type="text" class="form-control" id=item{{i}} required [(ngModel)]="model.overview[item]"
          name=item{{i}} #inputmodel="ngModel" #spy>
        <div [hidden]="inputmodel.valid || inputmodel.pristine" class="alert alert-danger">
          {{spy.className}}
        </div>
      </div>
    </div>
...