Angular 2动态子表单验证问题

时间：2017-02-13 17:09:00

标签： angular

当我想用动态子窗体保存我的更改时，我遇到了问题，它保留了我的旧值，我使用了formArrayName =＆＃34;＆＃34;对于父div和[formGroupName] =＆＃34; i＆＃34;对于孩子，包括formControlName =＆＃34; name＆＃34;对于特定的输入，但是当我想要保存它时保留旧的值。

该问题仅涉及动态部分，对于静态输入，一切都很有效，并保存数据。

它是我的代码：

 <div class="page-content">
  <button type="button" data-hover="tooltip" title="List" class="btn btn-orange" data-toggle="modal" (click)="backToList()">
  <button type="button" data-hover="tooltip" title="Save" class="btn btn-orange" data-toggle="modal" (click)="saveConfirm()">

  <form [formGroup]="formDatiCorrispettivi">

    <div class="panel">
      <div class="panel-heading">CHIUSURA GIORNALIERA</div>
      <div class="panel-body pan">
        <div class="form-body pal">
          <div class="row">
            <div class="col-md-3">
              <div class="form-group">
                <label for="inputDataEmissione" class="control-label">Data Emissione*:</label>
                <small *ngIf="formErrors.dateEmissione" class="text-danger">
                  {{ formErrors.dateEmissione }}
                </small>
                <div>
                  <p-calendar (onSelect)="onSelectDate($event)" [(ngModel)]="corrDTO.dateEmissione" [locale]="it" id="inputDataEmissione" name="inputDataEmissione" showAnim="slideDown" [showIcon]="true" dateFormat="yy-mm-dd" formControlName="dateEmissione" [readonlyInput]="true" [monthNavigator]="true" [yearNavigator]="true" yearRange="1950:2050" [maxDate]="today" [class.input-not-valid]="formErrors.dateEmissione"></p-calendar>
                </div>
              </div>
            </div>
            <div class="col-md-2">
              <div class="form-group">
                <label for="inputTipologiaChiusura" class="control-label">TIPOLOGIA*:</label>
                <small *ngIf="formErrors.tipoloDocumento" class="text-danger">
                  {{ formErrors.tipoDocumento }}
                </small>
                <select id="inputTipologiaChiusura" class="form-control" style="max-width: 180px;" formControlName="tipoDocumento" [class.input-not-valid]="formErrors.tipoDocumento">
                  <option value="-1">seleziona ...</option>
                  <option *ngFor="let chiusure of tipologiaChiusura" value="{{chiusure}}">
                    {{ chiusure }}
                  </option>
                </select>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="panel">
      <div class="panel-heading">RIEPILOGO FISCALE</div>
      <div class="panel-body pan">
        <div class="form-body pal">
          <div formArrayName="castellettoIVA" class="row">


            <!-- Inizio del box contenente riepilogo fiscale -->

            <div class="baseGridResp" *ngFor="let riep of formDatiCorrispettivi.controls['castellettoIVA'].controls; let i = index;" [formGroupName]="i">

              <div class="GRbox">

                <div class="form-group">
                  <div class="GRlabel">
                    <label for="inputImponibile" class="control-label">IMPONIBILE*</label>
                  </div>
                  <div class="GRcontent">
                    <small *ngIf="formErrors.imponibile" class="text-danger">
                      {{ formErrors.imponibile }}
                    </small>
                    <input id="inputImponibile" type="text" class="form-control" formControlName="imponibile" [class.input-not-valid]="formErrors.imponibile">
                  </div>
                </div>


              </div>
              <div class="GRbox">

                <div class="form-group">
                  <div class="GRlabel">
                    <label for="inputCodiceIVA" class="control-label">% ALIQ.IVA*:</label>
                  </div>
                  <div class="GRcontent">
                    <small *ngIf="formErrors.codiceIVA" class="text-danger">
                      {{ formErrors.codiceIVA }}
                    </small>
                    <select id="inputCodiceIVA" class="form-control" style="max-width: 180px;" formControlName="codiceIVA" [class.input-not-valid]="formErrors.codiceIVA" >
                      <option value="-1">seleziona ...</option>
                      <option *ngFor="let aliquota of aliquoteFiltrate" value="{{aliquota.codiceId}}">
                          {{ aliquota.descrizione | translate }}
                      </option>
                    </select>
                  </div>
                </div>


              </div>
              <div class="GRbox">

                <div class="form-group">
                  <div class="GRlabel">
                    <label>IMPOSTA:</label>
                  </div>
                  <div class="GRcontent">
                    <div>
                      {{ calcolaImposta(riep.controls['codiceIVA'].value,riep.controls['imponibile'].value) }}
                    </div>
                  </div>
                </div>


              </div>
              <div class="GRbox">

                <div class="form-group">
                  <div class="GRlabel">
                    <label>TOTALE:</label>
                  </div>
                  <div class="GRcontent">
                    <div>
                      {{ calcolaTotale(riep.controls['codiceIVA'].value,riep.controls['imponibile'].value) }}
                    </div>
                  </div>
                </div>


              </div>
              <div class="GRbox GRclose">

                <i class="fa fa-times" aria-hidden="true" (click)="eliminaRiepFiscale(i)"></i>

              </div>

            </div>

            <!-- Fine del box contenente riepilogo fiscale -->



            <div class="form-group">
              <div class="GRlabel">

              </div>
              <div class="GRcontent">
                <button type="button" data-hover="tooltip" title="Aggiungi Riepilogo Fiscale" class="btn btn-orange" data-toggle="modal" (click)="aggiungiRiepFisc($event)">
                  <i class="fa fa-plus-circle" aria-hidden="true"></i>
                  <i>Aggiungi</i>
                </button>
              </div>
            </div>


          </div>
        </div>
      </div>
    </div>
    <div class="panel">
      <div class="panel-heading">RIEPILOGO INCASSI</div>
      <div class="panel-body pan">
        <div class="form-body pal">
          <div formArrayName="incassi" class="row">

            <div class="baseGridResp" *ngFor="let riep of formDatiCorrispettivi.controls['incassi'].controls; let i = index;" [formGroupName]="i">

              <div class="GRbox">
                <div class="form-group">
                  <label for="inputTipologiaInc" class="control-label">TIPOLOGIA*:</label>
                  <small *ngIf="formErrors.tipoIncassi" class="text-danger">
                    {{ formErrors.tipoIncassi }}
                  </small>
                  <select id="inputTipologiaInc" class="form-control" style="max-width: 180px;" formControlName="tipoIncassi" [class.input-not-valid]="formErrors.tipoIncassi">
                    <option value="-1">seleziona ...</option>
                    <option *ngFor="let incasso of tipologiaIncassi" value="{{incasso.valore}}">
                      {{ incasso.label }}
                    </option>
                  </select>
                </div>
              </div>

              <div class="GRbox">
                <div class="form-group">
                  <label for="inputImporto" class="control-label">IMPORTO*</label>
                  <small *ngIf="formErrors.importo" class="text-danger">
                    {{ formErrors.importo }}
                  </small>
                  <input id="inputImporto" type="text" class="form-control" formControlName="importo" [class.input-not-valid]="formErrors.importo">
                </div>
              </div>

              <div class="GRbox">
                <div class="form-group">
                  <label for="inputContoId" class="control-label">CONTO DI ACCREDITO*:</label>
                  <small *ngIf="formErrors.contoId" class="text-danger">
                    {{ formErrors.contoId }}
                  </small>
                  <select id="inputContoId" class="form-control" style="max-width: 180px;" formControlName="contoId" [class.input-not-valid]="formErrors.contoId">
                    <option value="-1">seleziona tipologia...</option>
                    <option *ngFor="let conto of optionsComboContiAccredito" value="{{ conto.idConto }}" [hidden]="mostraConti(riep.controls['tipoIncassi'].value,conto.idConto)">
                      {{ conto.label }}
                    </option>
                  </select>
                </div>
              </div>

              <div class="GRbox GRclose">

                <i class="fa fa-times" aria-hidden="true" (click)="eliminaRiepIncassi(i)"></i>

              </div>



            </div>

            <div class="form-group">
              <div class="GRlabel">

              </div>
              <div class="GRcontent">
                <button type="button" data-hover="tooltip" title="Aggiungi Riepilogo Fiscale" class="btn btn-orange" data-toggle="modal" (click)="aggiungiRiepIncas()">
                  <i class="fa fa-plus-circle" aria-hidden="true"></i>
                  <i>Aggiungi</i>
                </button>
              </div>
            </div>



          </div>
        </div>
      </div>
    </div>
    <div class="panel">
      <div class="panel-heading">RIEPILOGO CHIUSURA</div>
      <div class="panel-body pan">
        <div class="form-body pal">
          <div class="row">
            <div class="col-md-4">
              <label>TOT: {{ totaleImpon }}</label>
              <label>TOT: {{ totaleImpos }}</label>
              <label>TOT: {{ corrDTO.tot }}</label>
            </div>
          </div>
        </div>
      </div>
    </div>


  </form>
</div>

并且它是我的表单结构：

import {FormGroup, FormBuilder, FormArray, FormControl} from "@angular/forms";
import {Corrispettivo} from "../../../model/corrispettivi/Corrispettivo";
import {Bill} from "../../../model/corrispettivi/Bill";

export class ModificaCorrispettiviForms {

  constructor() {

  }


  public static buildFormDatiCorrispettivi(
    corrDTO:Corrispettivo,
    fb:FormBuilder,
    bills:Bill[],
  ): FormGroup {
    var formDatiCorrispettivi:FormGroup = fb.group({
      'id':                       [corrDTO.id],
      'dateEmissione':            [corrDTO.dateEmissione],
      'tipoDocumento':            [corrDTO.tipoDocumento],
      'castellettoIVA':           [fb.group([{id:[],imponibile:[],codiceIVA:[],imposta:[]}])],
      'incassi':                  [fb.group([{importo:[],tipoIncasso:[],contoId:[]}])],
      'totale':                   [corrDTO.totale],
      'stato':                    [corrDTO.stato],
    });

    let arrayControl:FormArray = fb.array([]);
    corrDTO.castellettoIVA.forEach(item => {
      let newGroup = fb.group({
        id:[item.id],
        imponibile: [item.imponibile],
        codiceIVA: [item.codiceIVA],
        imposta: [item.imposta],
      });

      arrayControl.push(newGroup);
    });

    formDatiCorrispettivi.controls['castellettoIVA'] = arrayControl;

    let arrayControl2:FormArray = fb.array([]);
    if(corrDTO.incassi!=undefined){
      corrDTO.incassi.forEach(item => {
        let tipoIncasso=-1;
        for(let i=0;i<bills.length;i++){
          if(bills[i].id==item.contoId){
            if(bills[i].tipoConto=="CONTO_CASSA"){
              tipoIncasso=1;
            }else{
              tipoIncasso=2;
            }
          }
        }

        let newGroup2 = fb.group({
          importo: [item.importo],
          tipoIncassi: tipoIncasso,
          contoId: [item.contoId],
        });
        arrayControl2.push(newGroup2);
      });
    }

    formDatiCorrispettivi.controls['incassi'] = arrayControl2;

    return formDatiCorrispettivi;
  }

  public static formErrors = {
    'id':'',
    'dateEmissione':'',
    'tipoDocumento':'',
    'castellettoIVA':'',
    'incassi':'',
    'totale':'',
    'stato':'',
  };

  public static validationMessages = {
    'id':'',
    'dateEmissione':            {'required':"Questo campo è obbligatorio."},
    'tipoDocumento':            {'required':"Questo campo è obbligatorio."},
    'castellettoIVA':'',
    'incassi':'',
    'totale':'',
    'stato':'',
  };






}

0 个答案:

没有答案
相关问题
最新问题