Looped div с тегом "select" изменяет значение каждого выбора, когда используется только один из них в Angular - PullRequest
0 голосов
/ 20 января 2020

У меня возникли проблемы с пониманием того, как привязка свойств и NgModel работают в Angular, особенно с формами. У меня есть один случай, когда я хочу иметь несколько входов с одинаковыми параметрами (в одной форме), что означает, что я делаю div с помощью счетчика oop, и каждый созданный выбор имеет свои параметры Зацикливается на массиве имен.

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

Вот часть кода формы, над которой я работаю:

<div class="form-group" *ngIf="linkToSeveralObj">
 <label for="type">Objet/s à lier</label><br/>
 <span *ngFor="let in of counter(nbObj); let i = index">
   <div *ngIf="i == nbObj-1;else oblock"><select class="custom-select" name="severalObjToLink{{i}}" [(ngModel)]="form.severalObjToLink" required>
     <option *ngFor="let o of allObj" [value]="o.internName">{{o.internName}}</option>
   </select><a (click)="addSelect()" class="ml-3"><span class="glyphicon glyphicon-plus"></span></a></div>
  <ng-template #oblock>
    <select class="custom-select" name="severalObjToLink{{i}}" [(ngModel)]="form.severalObjToLink" required>
      <option *ngFor="let o of allObj" [value]="o.internName">{{o.internName}}</option>
    </select><br/><br/></ng-template></span>
    <div *ngIf="f.submitted && severalObjToLink.invalid">
      <div *ngIf="severalObjToLink.errors.required">Les objets à lier sont requis</div>
    </div>
  </div>

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

Я предполагаю есть проблема с именами. Если бы кто-то мог помочь мне с проблемой, я был бы рад, спасибо заранее

РЕДАКТИРОВАТЬ 2: Проблема решена, см. Обновленный код ниже:

<div class="form-group" *ngIf="linkToSeveralObj">
 <label for="type">Objet/s à lier</label><br/>
 <span *ngFor="let in of counter(nbObj); let i = index">
   <div *ngIf="i == nbObj-1;else oblock"><select class="custom-select" name="severalObjToLink{{i}}" [(ngModel)]="severalObjToLink[i]" required>
     <option *ngFor="let o of allObj" [value]="o.internName">{{o.internName}}</option>
   </select><a (click)="addSelect()" class="ml-3"><span class="glyphicon glyphicon-plus"></span></a></div>
  <ng-template #oblock>
    <select class="custom-select" name="severalObjToLink{{i}}" [(ngModel)]="severalObjToLink[i]" required>
      <option *ngFor="let o of allObj" [value]="o.internName">{{o.internName}}</option>
    </select><br/><br/></ng-template></span>
    <div *ngIf="f.submitted && severalObjToLink[i].invalid">
      <div *ngIf="severalObjToLink[i].errors.required">Les objets à lier sont requis</div>
    </div>
  </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...