Несколько флажков в реактивных формах в угловой таблице - PullRequest
Новая
       72

Несколько флажков в реактивных формах в угловой таблице

0 голосов
/ 04 июля 2019

У меня есть таблица реактивных форм в моем угловом приложении, и у меня есть 3 флажка для каждой строки. Присутствовать, отсутствовать и уходить. У них только одно и то же formControlName = "status". Они должны только установить один флажок для строки. Статус таков:

Подарок = 1
Отсутствует = 2
Оставить = 3

Как я смогу это сделать? Пожалуйста, проверьте этот код стекаблиц: НАЖМИТЕ ЗДЕСЬ 

initGroup() {
    let rows = this.form.get('rows') as FormArray;
    rows.push(this.fb.group({
      name: [null, Validators.required],
      status: [null, Validators.required]
    }))
  }

Ответы [ 2 ]

0 голосов
/ 05 июля 2019

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

Продолжайте с тем, что предоставил @Debabrata Пол Чоудхури.

0 голосов
/ 04 июля 2019

Почему вы используете флажок, вы должны использовать переключатели. Просто измените тип элемента управления формы состояния <input type="radio"> Он будет работать нормально. Я также проверил ваш код на стеке. 

<tbody>
      <tr *ngFor="let row of form.controls.rows.controls; let i = index" [formGroupName]="i">
        <td>          
          <div class="form-group row">
            <input type="text" formControlName="name">
          </div>
        </td>
        <td>
          <input type="radio" class="custom-control-input" id="customcheckbox{{i}}" formControlName="status" value=1><label class="custom-control-label" for="customcheckbox{{i}}"></label>
        </td>
        <td>
          <input type="radio" class="custom-control-input" id="customcheckbox{{i}}" formControlName="status" value=2><label class="custom-control-label" for="customcheckbox{{i}}"></label>
        </td>
        <td>
          <input type="radio" class="custom-control-input" id="customcheckbox{{i}}" formControlName="status" value=3><label class="custom-control-label" for="customcheckbox{{i}}"></label>
        </td>
        <td>
          <button type="button" class="btn btn-square btn-danger btn-sm waves-effect waves-light"  (click)="onDeleteRow(i)"> <i class="icofont icofont-ui-delete"></i> Remove</button>
        </td>
      </tr>
    </tbody>
...