Whoah, you can’t do this. How can you expect multiple form elements to bind to the same form? Each one needs a separate FormGroup.
i am bringing only one user data from api
html
<form [formGroup]="authForm" (submit)="submitForm()" *ngFor="let owner_list of roomOwnerSingleData">
<ion-list mode="md" class="ion-list-margin-bottom">
<ion-item class="input-ion-item"> <!--[(ngModel)]="email" [ngModelOptions]="{standalone: true}"-->
<ion-input mode="ios" type="text" value="{{owner_list.email}}" formControlName="email" placeholder="Email ID *" ></ion-input>
</ion-item>
<div class="error-box" *ngIf="emailRequired">* Email ID is required!</div>
<div class="error-box" *ngIf="emailValid">* Valid Email ID is required!</div>
</ion-list>
<ion-list mode="md" class="ion-list-margin-bottom">
<ion-item class="input-ion-item">
<ion-input mode="ios" type="text" value="{{owner_list.cell}}" formControlName="mobile" placeholder="Mobile (Multiple If need) *" ></ion-input>
</ion-item>
<div class="error-box" *ngIf="mobileRequired">* Mobile is required!</div>
<div class="error-box" *ngIf="mobileValid">Mobile is invalid. Space is not allowed</div>
</ion-list>
<ion-list mode="md" class="ion-list-margin-bottom">
<ion-item class="input-ion-item">
<ion-label class="ion-label">Thana *</ion-label>
<ion-select class="ion-select dual-left-ion-select" mode="md" formControlName="thanaId" (ionChange)="openArea($event)">
<ion-option value="{{thana_list.id}}" [selected]="thana_list.id == owner_list.thana" *ngFor="let thana_list of thanaData">{{thana_list.name}}</ion-option>
</ion-select>
</ion-item>
<div class="error-box" *ngIf="thanaRequired">* Thana is required!</div>
</ion-list>
<button mode="md" type="submit" button-md ion-button full tappable >Submit</button>
</form>
ts
constructor(
public roomOwnerSingle: RoomOwnerSingle,
public fb: FormBuilder,
private thana: Thana,
){
this.loadRoomOwnerSingle();
this.loadThana();
this.authForm = fb.group({
'thana' : [null, Validators.compose([Validators.required])],
'mobile' : [null, Validators.compose([Validators.required, Validators.pattern('^(?:[0-9]{11},)*[0-9]{11}$') ])],
'email' : [null, Validators.compose([Validators.required, Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$') ])]
});
}
get email(): string {
return this.authForm.value['email'];
}
get mobile(): string {
return this.authForm.value['mobile'];
}
get thanaId(): string {
return this.authForm.value['thanaId'];
}
submitForm() {
//this.email automatically has the email the user submitted
console.log(this.email);
console.log(this.thanaId);
console.log(this.mobile);
}
complete code here
Get rid of the ngFor and all of the value attributes. Set the form control values inside the controller from this (poorly named) owner_list; that is not the template’s responsibility.
html
<form [formGroup]="authForm" (submit)="submitForm()">
<ion-list mode="md" class="ion-list-margin-bottom">
<ion-item class="input-ion-item"> <!-- [(ngModel)]="email" [ngModelOptions]="{standalone: true}" -->
<ion-input mode="ios" type="text" formControlName="email" placeholder="Email ID *" ></ion-input>
</ion-item>
<div class="error-box" *ngIf="emailRequired">* Email ID is required!</div>
<div class="error-box" *ngIf="emailValid">* Valid Email ID is required!</div>
</ion-list>
<ion-list mode="md" class="ion-list-margin-bottom">
<ion-item class="input-ion-item">
<ion-input mode="ios" type="text" formControlName="mobile" placeholder="Mobile (Multiple If need) *" ></ion-input>
</ion-item>
<div class="error-box" *ngIf="mobileRequired">* Mobile is required!</div>
<div class="error-box" *ngIf="mobileValid">Mobile is invalid. Space is not allowed</div>
</ion-list>
<ion-list mode="md" class="ion-list-margin-bottom">
<ion-item class="input-ion-item">
<ion-label class="ion-label">Thana *</ion-label>
<ion-select class="ion-select dual-left-ion-select" mode="md" formControlName="thanaId" (ionChange)="openArea($event)">
<ion-option value="{{thana_list.id}}" [selected]="thana_list.id == thanaId" *ngFor="let thana_list of thanaData">{{thana_list.name}}</ion-option>
</ion-select>
</ion-item>
<div class="error-box" *ngIf="thanaRequired">* Thana is required!</div>
</ion-list>
<button mode="md" type="submit" button-md ion-button full tappable >Submit</button>
</form>
ts
export class MyAccount {
email:any;
mobile:any;
thanaId:any;
constructor(
public roomOwnerSingle: RoomOwnerSingle,
public fb: FormBuilder,
private thana: Thana,
){
this.loadThana();
Promise.all([this.storage.get("user_id")]).then(values => {
this.email = this.roomOwnerSingle.roomOwnerSingleAll(values[0]).subscribe((resSize)=>resSize.email);
this.mobile = this.roomOwnerSingle.roomOwnerSingleAll(values[0]).subscribe((resSize)=>resSize.cell);
this.thanaId = this.roomOwnerSingle.roomOwnerSingleAll(values[0]).subscribe((resSize)=>resSize.thana);
});
}
submitForm() {
//this.email automatically has the email the user submitted
console.log(this.email);
console.log(this.thanaId);
console.log(this.mobile);
}
}
now what will i do?
please refer any link for update information using form or show me some code
this.authForm = new FormGroup({
thanaId : new FormControl( this.email,Validators.required ),
mobile : new FormControl( this.mobile,[Validators.required, Validators.pattern('^(?:[0-9]{11},)*[0-9]{11}$')] ),
email : new FormControl(this.thanaId,[Validators.required, Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')] )
});
you told me like this type of code?
How do you send these values to a web api ?
like multiple records added in a form and then send all those recirds to a web api to be sent to single cells in the database table
I am facing the same problem. Did you get the answer?
This is good solutions but in needs property name=“username”