Ionic Validation Array Form - ionic-framework

I have the below form that is generate dynamically, I am trying to make a validation but is fail
Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'model: sdaDAd'. Current value: 'model: '.
HTML
<div [formGroup]="someForm">
<ion-item-group *ngFor="let att of day; let idx = index">
<ion-item >
<ion-label color="primary">{{att.label}}{{idx+1}}. Day</ion-
label>
<ion-input formControlName="day" type="text" text-right
[(ngModel)]="day[idx].value"></ion-input>
</ion-item>
<ion-item >
<ion-label color="primary">{{att.label}}{{idx+1}}. Exc</ion-label>
<ion-input type="text" formControlName="exc" text-right
[(ngModel)]="exc[idx].value"></ion-input>
</ion-item>
<ion-item >
<ion-label color="primary">{{att.label}}{{idx+1}}.
Hint/Repeats</ion-label>
<ion-input type="text" formControlName="hint" text-right
[(ngModel)]="hint[idx].value"></ion-input>
</ion-item>
<span color=danger float-right ion-button icon-left clear
*ngIf="exc.length > 0"
(click)="removeInputField(idx)"><ion-icon name="close"></ion-icon>
Remove
</span>
</ion-item-group>
<ion-card *ngIf="data_exc">
<ion-item *ngFor="let att of exc; let i=index">
<div class="card-title">Exc: {{att.value}}</div>
<div class="card-title">Hint/Repeats: {{hint[i].value}}</div>
<div class="card-title">Day: {{day[i].value}}</div>
</ion-item>
<div class="card-title">Notes: {{workoutData.notes}}</div>
</ion-card>
<button ion-button (click)="Add()">+Add</button>
<button ion-button (click)="goTo()" >Preview</button> <br>
<ion-toolbar>
<ion-item>
<ion-textarea placeholder="Tap here to enter a new note"
[(ngModel)]="workoutData.notes" formControlName="notes"
autocomplete="on" autocorrect="on"></ion-textarea>
</ion-item>
</ion-toolbar>
<button [disabled]="!someForm.valid" ion-button full
(click)="presentConfirmCustomWorkout()" type="submit" >Submit</button>
</div>
Validation to check if the form is empty so I will not get empty values in array
this.someForm = formbuilder.group({
'day': [this.day.value, Validators.compose([Validators.required])],
'exc': [this.exc.value, Validators.compose([Validators.required])],
'hint': [this.hint.value, Validators.compose([Validators.required])],
'notes': ['', Validators.compose([Validators.required])],
});

Related

how to nest lists in ionic 4 without it looking a complete mess?

Having problems trying to nest lists, I expected them to be inset the further down they go, but instead I've got a complete mess as you can see in the screenshot below.
Here's the code:
<ion-content padding>
<div *ngIf="categories && categories.length > 0; then validContent else noContent"></div>
<ng-template #validContent>
<p>Please select the categories you wish to receive content for.</p>
<form (ngSubmit)="processForm($event)" id="userForm" class="ssp__form">
<ion-list lines="none" no-padding>
<ion-item lines="none" *ngFor="let category of categories">
<ion-label>{{ category.name }}</ion-label>
<ion-checkbox [name]="category.slug" [(ngModel)]="submissionData[category.term_id]"></ion-checkbox>
<ion-list inset="true" style="width:100%;" lines="none" no-padding *ngIf="category.children.length > 0">
<ion-item *ngFor="let subCategory of category.children">
<ion-label>{{ subCategory.name }}</ion-label>
<ion-checkbox [name]="subCategory.slug" [(ngModel)]="submissionData[subCategory.term_id]"></ion-checkbox>
</ion-item>
</ion-list>
</ion-item>
</ion-list>
<ion-button type="submit" style="width:100%;" color="primary" expand="block">Save Categories</ion-button>
</form>
</ng-template>
<ng-template #noContent>
<ion-card>
<ion-card-header>
<ion-card-title style="text-align: center; font-size: 14px;">No Categories Found.</ion-card-title>
</ion-card-header>
<ion-card-content>
<p style="text-align: center">There are no categories for you to read at this time.</p>
</ion-card-content>
</ion-card>
</ng-template>
</ion-content>

ionic 4: <ion-reorder> not working as expected

i'm working with ionic 4 angular 7. I'm using <ion-reorder> to reorder list. Drag n Drop works for the first time fine but when I release the click, item got stuck. After first reorder everything freezes. And I'm unable to attempt reorder for the second time.
Here my .html file
<ion-list lines="none">
<ion-reorder-group disabled="false">
<ion-reorder>
<ion-item>
<ion-thumbnail no-margin item-start>
<img src="../assets/images/5.jpg">
</ion-thumbnail>
<div class="pl-2">
<h5 no-margin>Multan</h5>
<p no-margin>Historical place...</p>
</div>
<ion-buttons slot="end">
<ion-button>
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
</ion-buttons>
</ion-item>
</ion-reorder>
<ion-reorder>
<ion-item>
<ion-thumbnail no-margin item-start>
<img src="../assets/images/5.jpg">
</ion-thumbnail>
<div class="pl-2">
<h5 no-margin>Multan</h5>
<p no-margin>Historical place...</p>
</div>
<ion-buttons slot="end">
<ion-button>
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
</ion-buttons>
</ion-item>
</ion-reorder>
<ion-reorder>
<ion-item>
<ion-thumbnail no-margin item-start>
<img src="../assets/images/5.jpg">
</ion-thumbnail>
<div class="pl-2">
<h5 no-margin>Multan</h5>
<p no-margin>Historical place...</p>
</div>
<ion-buttons slot="end">
<ion-button>
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
</ion-buttons>
</ion-item>
</ion-reorder>
<ion-reorder>
<ion-item>
<ion-thumbnail no-margin item-start>
<img src="../assets/images/5.jpg">
</ion-thumbnail>
<div class="pl-2">
<h5 no-margin>Multan</h5>
<p no-margin>Historical place...</p>
</div>
<ion-buttons slot="end">
<ion-button>
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
</ion-buttons>
</ion-item>
</ion-reorder>
</ion-reorder-group>
</ion-list>
When I drag n Drop Item. It get stuck when I drop it. After this, everything freezes.
Any Help...?
I'm using
Ionic: 4.10.2
Angular: 7.3.0
I think you need to store your data in a variable and ngFor on these data to build your reorder items.
this.items: Array<img: string; title: string; description: string; icon:
string> = [yourArrayOfObjects];
I think then you need to catch the ionItemReorder event like this
<ion-reorder-group (ionItemReorder)="reorderItems($event)" disabled="false">
and in your .ts the reorderItems() function could be
reorderItems(ev) {
const itemMove = this.items.splice(ev.detail.from, 1)[0];
this.items.splice(ev.detail.to, 0, itemMove);
ev.detail.complete();
}
The key here is to complete the event and you have to do it manually. So the ionItemReorder event callback is a must. So something as simple as this should do the trick:
Typescript :
public onItemReorder({ detail }) {
detail.complete(true);
}
HTML :
<ion-reorder-group (ionItemReorder)="onItemReorder($event)" [disabled]="false">
ionic4 version:
html code:
<ion-content>
<ion-list>
<ion-list-header>
<ion-label>INCLUDE</ion-label>
</ion-list-header>
<ion-reorder-group (ionItemReorder)="reorder($event)" [disabled]="false">
<ion-item *ngFor="let accessory of accessories">
<ion-label>{{accessory}}</ion-label>
<ion-reorder></ion-reorder>
</ion-item>
</ion-reorder-group>
</ion-list>
</ion-content>
typescript code:
accessories = ['test', 'test1', 'test2'];
reorder(event) {
const itemToMove = this.accessories.splice(event.detail.from, 1)[0];
this.accessories.splice(event.detail.to, 0, itemToMove);
}
This will never throw any type of error, it works. I am 100% sure, have used 3-4 times. I hope, this will also help you.
<ion-list >
<ion-item-group (ionItemReorder)="reorder($event)" reorder='true' >
<ion-item *ngFor="let item of file_uri" (click)="openSubMenu(item.bunch)" style="background-color: #F0F0F0">
<ion-avatar item-left >
<img src="assets/{{item.bunch}}.svg">
</ion-avatar>
<h2 color="primary_secound">{{item.bunch}}
</h2>
<p>Click To See Menu of {{item.bunch}}
</p>
<ion-icon name="arrow-dropright" item-right></ion-icon>
</ion-item>
</ion-item-group>
</ion-list>
reorder(event) {
const itemToMove = this.file_uri.splice(event.from, 1)[0];
this.file_uri.splice(event.to, 0, itemToMove);
}
With Angular - Ionic - Typescript
in HTML file/Code:
<ion-reorder-group (ionItemReorder)="reorderItems($event)" disabled="false">
<ion-item *ngFor="let item of yourArray">
<ion-label> {{ item.name }} </ion-label>
<ion-reorder slot="end"></ion-reorder>
</ion-item>
</ion-reorder-group>
Controller or .ts Code:
reorderItems(ev): void {
const itemMove = this.yourArray.splice(ev.detail.from, 1)[0];
this.yourArray.splice(ev.detail.to, 0, itemMove);
ev.detail.complete();
}
As per the above example, If you did not add reorderItems() in your controller it will not work. you can change function name as you like.

Proper way to handle fields with same names in Forms

I met strange bug in my application. I template driven form with two addresses two fill:
<ion-list>
<ion-list-header color="secondary">From
<button ion-button icon-only item-right clear small (click)="usePosition($event)">
<ion-icon name="locate"></ion-icon>
</button>
<button ion-button icon-only item-right clear small (click)="searchAddress(true,$event)">
<ion-icon name="search"></ion-icon>
</button>
<button ion-button icon-only item-right clear small (click)="useHome(true,$event)">
<ion-icon name="home"></ion-icon>
</button>
</ion-list-header>
<div>
<ion-item>
<ion-label floating>Street Address*</ion-label>
<ion-input type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="createRequest.legs[0].addressFrom.Street"
required></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Floor/Apartment</ion-label>
<ion-input type="text"
name="Extention"
[ngModelOptions]="{standalone: true}"
[(ngModel)]="createRequest.legs[0].addressFrom.Extention"></ion-input>
</ion-item>
<ion-item padding>
<ion-label floating>City or Borough*</ion-label>
<ion-input type="text" required name="City"
pattern="[a-zA-Z ]*"
[ngModelOptions]="{standalone: true}"
[(ngModel)]="createRequest.legs[0].addressFrom.City">
</ion-input>
</ion-item>
<ion-item padding-bottom>
<ion-label floating>
Zip Code*(5 digits)
</ion-label>
<ion-input type="tel" name="Zip" #ZipF="ngModel"
pattern="\d{5}"
[textMask]="{mask:masks.zip}"
[ngModelOptions]="{standalone: true}"
[(ngModel)]="createRequest.legs[0].addressFrom.Zip"
></ion-input>
</ion-item>
</div>
</ion-list>
<ion-list padding-bottom padding-top>
<ion-list-header>To
<button ion-button icon-only item-right clear small (click)="searchAddress(false,$event)">
<ion-icon name="search"></ion-icon>
</button>
<button ion-button icon-only item-right clear small (click)="useHome(false,$event)">
<ion-icon name="home"></ion-icon>
</button>
</ion-list-header>
<ion-item>
<ion-label floating>Street Address*</ion-label>
<ion-input type="text"
[ngModelOptions]="{standalone: true}"
#Street="ngModel"
[(ngModel)]="createRequest.legs[0].addressTo.Street"
required></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Floor/Apartment</ion-label>
<ion-input type="text"
[ngModelOptions]="{standalone: true}"
#Extention="ngModel"
[(ngModel)]="createRequest.legs[0].addressTo.Extention"
></ion-input>
</ion-item>
<ion-item padding>
<ion-label floating>City or Borough*</ion-label>
<ion-input type="text"
pattern="[a-zA-Z ]*"
#City="ngModel"
[ngModelOptions]="{standalone: true}"
[(ngModel)]="createRequest.legs[0].addressTo.City">
</ion-input>
</ion-item>
<ion-item>
<ion-label floating>Zip Code(5 digits)</ion-label>
<ion-input type="tel" #Zip="ngModel"
pattern="\d{5}"
[ngModelOptions]="{standalone: true}"
[textMask]="{mask:masks.zip}"
[(ngModel)]="createRequest.legs[0].addressTo.Zip"
></ion-input>
</ion-item>
</ion-list>
I tried to use [ngModelOptions]="{standalone: true}" but without any result.
At some moment for unkonown reason two addresses start duplicate each other and even stranger thing in this case that using predefined data(like in useHome() method) didn't give effect. I know that answer is near, so will appreciate any help in advance.
Use unique name attributes for your form fields, this way each form field will be evaluated as separate one. I see some inconsistency in the use of the name attribute, all should have a name attribute, as well as #someName="ngModel" if you want to use validation. Loose the ngModelOptions altogether. I would separate these and do for example From... and To... for the name attribute:
For example the two fields for Street:
<ion-input name="FromStreet" #FromStreet="ngModel"
[(ngModel)]="createRequest.legs[0].addressFrom.Street" required>
</ion-input>
and
<ion-input type="text" name="ToStreet" #ToStreet="ngModel"
[(ngModel)]="createRequest.legs[0].addressTo.Street" required>
</ion-input>
This way all fields are unique.
This line of code:
[ngModelOptions]="{standalone: true}"
Is telling the form that your input element is NOT included as part of the form's data. You only want to do that with controls that you don't want to track on submittal. For example, say you have a checkbox that simply opens or closes a part of the user interface. You don't want that part of the submitted data, so you would use the standalone option so it "stands alone" from the form and its data.

ionic2: How to do calculations in form?

I have a form with product rate and quantity inputs. I need to calculate the value (rate * quantity) and assign the value to amount input field.
Please find the code snippet below:
<form [formGroup]="additemForm" (ngSubmit)="submit(additemForm.value)" >
<ion-row>
<ion-col>
<ion-list inset>
<ion-item>
<ion-label>Product :</ion-label>
<ion-select formControlName="product">
<ion-option *ngFor="let product of productArray" value="{{product.code}}" selected="false">{{product.name}}</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>QUANTITY :</ion-label>
<ion-input type="number" formControlName="qty"></ion-input>
</ion-item>
<ion-item>
<ion-label>RATE:</ion-label>
<ion-input type="number" formControlName="rate"></ion-input>
</ion-item>
<ion-item>
<ion-label>Value :</ion-label>
<ion-input type="number" formControlName="value"></ion-input>
</ion-item>
</ion-list>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="signup-col">
<button ion-button class="submit-btn" type="submit" [disabled]="!additemForm.valid">Submit</button>
<button ion-button type="button" (click)='cancel()' >Cancel</button>
</ion-col>
</ion-row>
</form>
You need to use [(ngModel)] for this.
<ion-item>
<ion-label>QUANTITY :</ion-label>
<ion-input type="number" formControlName="qty" [(ngModel)]="quantity"></ion-input>
</ion-item>
<ion-item>
<ion-label>RATE:</ion-label>
<ion-input type="number" formControlName="rate" [(ngModel)]="rateValue"></ion-input>
</ion-item>
<ion-item>
<ion-label>Value :</ion-label>
<ion-input type="number" formControlName="value" [(ngModel)]="rateValue * quantity"></ion-input>
</ion-item>
Now, still amount input field will be edible after this. And changing this value will affect the other 2 input values also. You can disable the input, so it will appear as a read-only input. This worked in my code.

How to show error message in form validation after completing the user entering

I am working on form input field i am able to display errors if the user enters wrong.
What i am expecting is when after the user complete is text in the input field and after that i should get the error message.
but i am getting the error message shown when user started is typing
here is my html code
<form [formGroup]="myForm" (ngSubmit)="submit()" >
<ion-row>
<ion-col>
<ion-item>
<ion-label primary floating>
FIRST NAME
</ion-label>
<ion-input type="text" id="firstname" class="form-control" formControlName="firstname"></ion-input>
</ion-item>
</ion-col>
<ion-col>
<ion-item>
<ion-label primary floating>
LAST NAME
</ion-label>
<ion-input type="text" id="lastname" class="form-control" formControlName="lastname"></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-item>
<ion-label primary floating>
USER ID (PHONE NO)
</ion-label>
<ion-input type="number" id="useridphone" class="form-control" formControlName="useridphone"></ion-input>
</ion-item>
<div *ngIf="submitAttempt">
<p *ngIf="myForm.controls.useridphone.errors && myForm.controls.useridphone.dirty " >
<small class="up" >
<strong><i>
Phone Number Must be 10 digits!
</i></strong>
</small>
</p>
</div>
<ion-item>
<ion-label primary floating>
PASSWORD
</ion-label>
<ion-input type="password" id="password" class="form-control" formControlName="password"></ion-input>
</ion-item>
<p *ngIf="myForm.controls.password.errors && myForm.controls.password.dirty">
<small class="up">
<strong><i>
Password must contain atleast (4),1-Char 1-Number
</i></strong>
</small>
</p>
<ion-item>
<ion-label primary floating>
CONFIRM PASSWORD
</ion-label>
<ion-input type="password" id="confirmpassword" class="form-control" formControlName="confirmpassword" ></ion-input>
</ion-item>
<ion-item>
<ion-label primary floating>
EMAIL
</ion-label>
<ion-input type="email" id="email" class="form-control" formControlName="email" ></ion-input>
</ion-item>
<p *ngIf="myForm.controls.email.errors && myForm.controls.email.dirty " class="alert alert-danger">
<small class="up">
<strong> <i>
Please Enter Valid Email Address!
</i></strong>
</small>
</p>
<div padding> </div>
<div padding> </div>
<button ion-button full round type="submit" [disabled]="!myForm.valid" color="secondary">SIGN UP</button> <br>
</form>
here is my ts file
passwordRegex: any = '(^(?=.*[a-z])(?=.*[0-9])[a-zA-Z0-9]+$)' ;
emailRegex: any = '^[a-z0-9]+(\.[_a-z0-9]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,15})$';
this.myForm = new FormGroup({
'firstname' : new FormControl('',[Validators.required,Validators.minLength(3),Validators.maxLength(10)]),
'lastname' : new FormControl('', [Validators.required,Validators.minLength(1),Validators.maxLength(10)]),
'useridphone' : new FormControl('', [Validators.required,Validators.minLength(10),Validators.maxLength(10)]),
'password' : new FormControl('',Validators.compose([Validators.required,Validators.minLength(4),Validators.maxLength(25),
Validators.pattern(this.passwordRegex)])),
'confirmpassword': new FormControl('',Validators.required),
'email' : new FormControl( '', Validators.compose([ Validators.required, Validators.pattern(this.emailRegex) ]) )
})
Use "onblur" event of HTML element.
<input type="text" name="name" value="value" onblur="validateText ( this )"/>
validateText will run when the user "leaves" the input field.
(User later indicated this was Ionic specific).
onBlur is (as far as I can see) an open issue in Ionic. It doesn't work. The recommendation from the github thread on this:
Here is a current work around for "blur".
Use "focusout" or "mouseleave". Those are both working.
https://github.com/driftyco/ionic/issues/5487
Note that in the github thread, it says that post beta-4 of Ionic, "blur" is working.