formArrayName-删除数组索引时formControlName(值)中的错误

时间:2019-05-16 13:06:09

标签: angular

我正在尝试从FormBuilder中删除数组,但是通过删除数组,输入中来自formControlName的值会出错。

当我单击删除按钮时,它会删除FormBuilder数组,但是会以错误的值安装ngfor,我认为formControlName会丢失。

我做了一个三级数组

{
  "fileimg": "",
  "nome": "",
  "descricao": "",
  "vl_venda": "",
  "id_cardapio": "",
  "items": [
    {
      "categoria": "",
      "qtdmin": "",
      "qtdmax": "",
      "bo_obrigatorio": "",
      "complementos": [
        {
          "nome": "",
          "descricao": "",
          "valor": "",
          "bo_pausar": ""
        }
      ]
    }
  ]
}
<div formArrayName="complementos"
  *ngFor="let complemento of item.controls.complementos.value | keyvalue; let j = index; trackBy:trackByFn">
  <!-- <pre> -->
    <div class="alert alert-secondary" role="alert">
    {{complemento.value | json}}
    </div>
  <!-- </pre> -->
  <div [formGroupName]="j">
    <div>
      <div class="row ">
        <div class='form-group is-empty col-md-3'>
          <label class="control-label" for='nome'>Nome {{complemento.value.nome}}</label>
          <input class='form-control'  [formControlName]="'nome'" placeholder="nome">
        </div>
        <div class='form-group is-empty col-md-4'>
          <label class="control-label" for='descricao'>Descrição</label>
          <input class='form-control' formControlName="descricao" placeholder="descricao">
        </div>
        <div class='form-group is-empty col-md-2'>
          <label class="control-label" for='valor'>Valor</label>
          <input class='form-control'  formControlName="valor" placeholder="valor">
        </div>
        <div class='form-group is-empty col-md-2'>
          <div class="checkbox" style="margin-top:28px">
            <input id="bo_pausar-{{j}}" class="magic-checkbox"
            type="checkbox"  formControlName="bo_pausar">
            <label for="bo_pausar-{{j}}">Pausar</label>
          </div>
        </div>
        <div class='form-group is-empty col-md-1'>
          <p class="cursor-pointer" style="margin-top: 28px;" (click)="deleteComplemento(item.controls.complementos,j)">
            Excluir
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

example error - gif
code stackblitz

0 个答案:

没有答案