Угловой: Ограничить пользователя, чтобы выбрать пункт меню только один раз - PullRequest
0 голосов
/ 10 октября 2018

У меня есть ситуация, когда использование может добавить FormControls в FormArray во время выполнения.В него включен выпадающий контроль.Я хочу ограничить пользователя, чтобы он выбирал опцию Sequence из спада только один раз.Таким образом, если последовательность уже выбрана, и пользователь добавляет новую строку, то в новом раскрывающемся меню пункт последовательности отключен.

Если я использую *ngIF и переменную, объявленную в машинописи, она отключает параметр последовательности во всех раскрывающихся списках, включаяпервый

код, который я использовал для генерации элементов управления

<div formArrayName="components"
   *ngFor="let c of components.controls; let i=index">
  <div [formGroupName]="i">
      <div class="form-group row">
           <div class="col-md-3">
              <select type="" id="component" class="form-control" placeholder="" formControlName="component" (change)="onChange(i)">
                   <option value="Constant">Constant</option>
                   <option value="Hash">Hash</option>
                   <option value="Sequence">Sequence</option>
              </select>
            </div>
       <div class="col-md-2">
        <input type="number" id="limit" min="1" class="form-control" formControlName="limit" [readOnly]="c.get('component').value == 'Constant'" (input)="onChange(i)" />
      </div>
      <div class="col-md-4">
        <input type="text" id="value" class="form-control" formControlName="value" (input)="onChange(i)" [readOnly]="c.get('component').value == 'Hash'" />
       </div>
       <div class="col-md-2">
           <button class="btn btn-sm btn-danger" (click)="deleteRow(i)">Remove <fa name="times"></fa></button>
        </div>
     </div>
   </div>
 </div>

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

image

Каксделать это?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...