hi guy when i use formgroup i got some error ! and the url not change !
can you share files code hmlt and ts both.
<form [formGroup]="editFormCarrier" class="example-full-width">
<ion-col size="12" class="ion-margin-bottom">
<ng-container *ngIf="agentRole === 'ROLE_PRINCIPAL_USER'">
<ion-item fill="outline" mode="md">
<ion-label position="stacked">Adresse E-mail</ion-label>
<ion-input
[(ngModel)]="dataUser[0].email_carrier"
type="string"
inputmode="text"
autocomplete="off"
autocorrect="off"
required
autofocus
formControlName="email_carrier"
></ion-input>
</ion-item>
<ion-label *ngIf="editFormUser.get('email_carrier')?.hasError('required')" style="color: red;">Adresse E-mail est obligatoire.</ion-label>
</ng-container>
</ion-col>
<ion-col size="12" class="ion-margin-bottom">
<ion-item fill="outline" mode="md">
<ion-label position="stacked">Raison sociale</ion-label>
<ion-input
[(ngModel)]="dataUser[0].rasion_sociale"
type="string"
inputmode="text"
autocomplete="off"
autocorrect="off"
required
autofocus
formControlName="raison_sociale"
></ion-input>
</ion-item>
<ion-label *ngIf="editFormUser.get('rasion_sociale')?.hasError('required')" style="color: red;">Raison sociale est obligatoire.</ion-label>
</ion-col>
<ion-col size="12" class="ion-margin-bottom">
<ion-item fill="outline" mode="md">
<ion-label position="stacked">Pays</ion-label>
<ion-select cancelText="cancel" okText="ok" formControlName="ref_country_id" [(ngModel)]="dataUser[0].ref_country_id" (ionChange)="setSelectedIndicatif1($event)" style="border-color: rgba(13, 110, 180, 1);" >
<ion-select-option *ngFor="let elt1 of pays_arr[0]" [(value)]="elt1.id" >{{elt1.nicename}}</ion-select-option>
</ion-select>
</ion-item>
</ion-col>
<ion-col size="12" class="ion-margin-bottom">
<ion-grid>
<ion-row>
<ion-col size="4" style="padding-inline-start:unset;">
<ion-item fill="outline" mode="md">
<ion-label position="stacked">Code</ion-label>
<ion-select cancelText="cancel" okText="ok" formControlName="ref_country_id" [(value)]="dataUser[0].ref_country_id" (ionChange)="setSelectedIndicatif1($event)" style="border-color: rgba(13, 110, 180, 1);" >
<ion-select-option *ngFor="let elt1 of pays_arr[0]" [(value)]="elt1.id" >+{{elt1.phonecode}}</ion-select-option>
</ion-select>
</ion-item>
</ion-col>
<ion-col size="8" style="padding-inline-start:unset; padding-inline-end:unset;">
<ion-item fill="outline" mode="md">
<ion-label position="stacked">Téléphone / Mobile</ion-label>
<ion-input
[(ngModel)]="dataUser[0].tel_carrier"
type="string"
inputmode="text"
autocomplete="off"
autocorrect="off"
required
autofocus
formControlName="tel_carrier"
></ion-input>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
<ion-col size="12" class="ion-margin-bottom">
<ion-item fill="outline" mode="md">
<ion-label position="stacked">Ville</ion-label>
<ion-input
[(ngModel)]="dataUser[0].ville"
type="string"
inputmode="text"
autocomplete="off"
autocorrect="off"
required
autofocus
formControlName="ville"
></ion-input>
</ion-item>
<ion-label *ngIf="editFormUser.get('ville')?.hasError('required')" style="color: red;">Ville est obligatoire.</ion-label>
</ion-col>
<ion-col size="12" class="ion-margin-bottom">
<ion-item fill="outline" mode="md">
<ion-label position="stacked">Cedex</ion-label>
<ion-input
[(ngModel)]="dataUser[0].cedex"
type="string"
inputmode="text"
autocomplete="off"
autocorrect="off"
required
autofocus
formControlName="cedex"
></ion-input>
</ion-item>
<ion-label *ngIf="editFormUser.get('cedex')?.hasError('required')" style="color: red;">Cedex est obligatoire.</ion-label>
</ion-col>
<ion-col size="12" class="ion-margin-bottom">
<ion-item fill="outline" mode="md">
<ion-label position="stacked">Adresse 1</ion-label>
<ion-input
[(ngModel)]="dataUser[0].adr1"
type="string"
inputmode="text"
autocomplete="off"
autocorrect="off"
required
autofocus
formControlName="adr1"
></ion-input>
</ion-item>
<ion-label *ngIf="editFormUser.get('adr1')?.hasError('required')" style="color: red;">Cedex est obligatoire.</ion-label>
</ion-col>
<ion-col size="12" class="ion-margin-bottom">
<ion-item fill="outline" mode="md">
<ion-label position="stacked">Adresse 2</ion-label>
<ion-input
[(ngModel)]="dataUser[0].adr2"
type="string"
inputmode="text"
autocomplete="off"
autocorrect="off"
required
autofocus
formControlName="adr2"
></ion-input>
</ion-item>
<ion-label *ngIf="editFormUser.get('adr2')?.hasError('required')" style="color: red;">Adresse 2 est obligatoire.</ion-label>
</ion-col>
<ion-col size="12" class="ion-margin-bottom">
<ion-item fill="outline" mode="md">
<ion-label position="stacked">Code postal</ion-label>
<ion-input
[(ngModel)]="dataUser[0].cp"
type="string"
inputmode="text"
autocomplete="off"
autocorrect="off"
required
autofocus
formControlName="cp"
></ion-input>
</ion-item>
<ion-label *ngIf="editFormUser.get('cp')?.hasError('required')" style="color: red;">Adresse 2 est obligatoire.</ion-label>
</ion-col>
<div>
<button class="save-button" (click)="saveProfileCarrier()" mat-button >Enregistrer</button>
</div>
</form>
this.editFormCarrier = new FormGroup({
// Carrier
raison_sociale: new FormControl('', [Validators.required]),
adr1: new FormControl('', [Validators.required]),
adr2: new FormControl('', [Validators.required]),
cp: new FormControl('', [Validators.required]),
ville: new FormControl('', [Validators.required]),
ref_country_id: new FormControl('', [Validators.required]),
cedex: new FormControl('', [Validators.required]),
email_carrier: new FormControl('', [Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$')]),
tel_carrier: new FormControl('', [Validators.required])
});
why you use ‘dataUser[0].ville’
for getdata from dataUser value .
You are using the forms incorrect by mixing ngModel with formGroup. You need to be using [formControl].
1 Like