Angular does not exclude ngIf elements from being sent as part of form data.

[X] bug report

Angular does not exclude ngIf elements from being sent as part of form data.

View:

                      <ion-item *ngIf="storeData.taxbyCounty">          
                          <ion-label floating color="primary">County</ion-label>
                          <ion-input type="text" formControlName="county"></ion-input>
                      </ion-item>             
                      <ion-item *ngIf="storeData.taxbyState">          
                          <ion-label floating color="primary">State</ion-label>
                          <ion-input type="text" formControlName="state"></ion-input>
                      </ion-item>
                      <ion-item *ngIf="storeData.taxbyZip">          
                          <ion-label floating color="primary">Zip</ion-label>
                          <ion-input type="text" formControlName="zip"></ion-input>
                      </ion-item>                  
                      <ion-item *ngIf="storeData.taxbyCountry">          
                          <ion-label floating color="primary">Country</ion-label>
                          <ion-input type="text" formControlName="country"></ion-input>
                      </ion-item>                  

Component initTax(county,state,zip,country){ return this.fb.group({ ‘county’: [county,Validators.required], ‘state’:[state,Validators.required], ‘zip’: [zip], ‘country’: [country,Validators.required]
}); }

Form Data being sent upon submit:

taxbyCountry:true taxbyCounty:true taxbyState:true taxbyZip:false … country:“US” county:“Salt” state:“UT” zip:“84116”

[tbosch]

@sudharsanmit ngIf only changes how your forms is displayed, but not what data it contains. I.e. the data controls the view, but not the other way around. Your ngSubmit callback will still be fired with the same data.

Regarding reactive forms: Angular has 2 kind of forms, “template driven” and “Reactive forms”. you are using the “Reactive Forms” approach, see https://angular.io/docs/ts/latest/cookbook/form-validation.html.

This is works as intended.

[tytskyi]

@sudharsanmit i think [ngIf] is simply view directive, which has nothing to do with reactive form.

There is a potential solution for your use case: https://plnkr.co/edit/NfHNJgTvtq38Wil1l39x?p=preview