У меня возникли проблемы с пониманием того, как привязка свойств и 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>