I am using p-table and p-columnFilter components in a modal in my angular project.
I am using the following libraries:
"primeflex": "^2.0.0",
"primeicons": "^4.1.0",
"primeng": "^11.2.0",
"#angular/cli": "^11.2.5",
here my HTML:
<th>
<div class="flex justify-content-center align-items-center">
Pressure ({{pressureUnits}})
<p-columnFilter type="numeric" field="tyre_pressure" display="menu">
</p-columnFilter>
</div>
</th>
Except for the input generated inside the p-column, everything is good.
Only numbers can be entered into the filter, not decimals.
Typing 56.8 into the input or paste 56.8 into the input does not work.
** SOLUTION **
using yoelb00 answer this is the code that worked:
<div class="flex justify-content-center align-items-center">
Pressure ({{pressureUnits}})
<p-columnFilter field="tyre_pressure" matchMode="equals" display="menu">
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
<input type="number" pInputText [ngModel]="value" (ngModelChange)="filter($event)" class="p-inputtext">
</ng-template>
</p-columnFilter>
</div>
You can use ng-template and you can write your own input,
it will solve your problem
<p-columnFilter type="number" field="tyre_pressure" display="menu">
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
<input type="number" pInputText [ngModel]="value" (ngModelChange)="filter($event)" class="p-inputtext"> </ng-template>
</p-columnFilter>
You can use pipes like the currency in the following example
Price <p-columnFilter type="numeric" field="finalPrice" display="menu" currency="SAR"></p-columnFilter> <p-sortIcon field="finalPrice"></p-sortIcon>
There are two input parameters for p-columnFilter component you could use. These are minFractionDigits and maxFractionDigits. If you provide them you should be able to type decimal values. Please see example below:
<p-columnFilter
type="numeric"
[minFractionDigits]="2"
[maxFractionDigits]="2"
field="outcomePriceYes"
display="menu"
class="p-ml-auto"
></p-columnFilter>
Related
does anyone know how to move the conditions and positions checkbox up? I found the code for this checkbox in odooenter image description here and it has this parameter, but when I change the state of this parameter to "before", nothing happens
odoo version 13.0, ecommerce module
code of checkbox
<template id="payment_sale_note" inherit_id="payment" name="Accept Terms & Conditions" customize_show="True" active="True">
<xpath expr="//div[#id='payment_method'][hasclass('js_payment')]" position="before">
<div class="custom-control custom-checkbox float-right mt-2 oe_accept_cgv_button">
<input type="checkbox" id="checkbox_cgv" class="custom-control-input"/>
<label for="checkbox_cgv" class="custom-control-label">
I agree to the <a target="_BLANK" href="/shop/terms">terms & conditions</a>
</label>
</div>
</xpath>
</template>
In my odoo v13, i have managed it like that :
<template id="my_payment_tokens_list" inherit_id="payment.payment_tokens_list" >
<xpath expr="//form[hasclass('o_payment_form')]/div[1]" position="before">
<div class="pl-4 mb-3">
<input type="checkbox" id="checkbox_cgv" class="custom-control-input" required="This field is required"/>
<label for="checkbox_cgv" class="custom-control-label"> I agree with <a target="_BLANK" href="/shop/terms"><u>General Terms and Conditions of Sale</u></a></label>
</div>
</xpath>
</template>
In my ionic-angular application I am using Template driven forms, When I submit the form without touching the input fields it should display the error message, but in this case I am not able to display the error message in the span.
You can see the comments in which the error-message is written.
How do I validate this form?
Page.html
<form (ngSubmit)="submitForm()" #form="ngForm">
<table>
<tr>
<td>
<ion-input type="text" #c1 [(ngModel)]="c" name="c" required>
</td>
<td>
<ion-input type="text" #c2 [(ngModel)]="d" name="d" required>
</td>
</tr>
</table>
<span *ngIf="c1.pristine && c2.pristine && form.submitted">Plese enter codes</span> //error-message is not printing.
<button type="submit">Submit</button>
</form>
Try Below code.
<form (ngSubmit)="submitForm()" #form="ngForm" novalidate>
<table>
<tr>
<td>
<ion-input type="text" [(ngModel)]="c" name="c" id="c1" #c1="ngModel" required>
<div [hidden]="!(c1.invalid && c1.touched)">Invalid.</div>
</td>
<td>
<ion-input type="text" [(ngModel)]="d" name="d" id="c2" #c1="ngModel" required>
<div [hidden]="!(c2.invalid && c2.touched)">Invalid.</div>
</td>
</tr></table><button type="submit" [disabled]="!form.form.valid">Submit</button></form>
I am using angular version 1.5.5 and recently upgraded to angular material 1.1.0. After upgrading I started facing few issues in ng messages. Initially ng messages was not displaying. I fixed it by adding below class by referring to git issue
md-input-container .md-input-message-animation:not(.ng-animate) {
opacity: 1;
margin-top: 0px;
}
Now same ng message is displaying multiple times.
<div class="inputbox-area" ng-form='subForm'>
<md-input-container class="md-block" ng-repeat="item in dg.inputArr">
<label>Level {{$index+1}}</label>
<input md-maxlength="32" maxlength="32" ng-change="dg.showErrors = false" name="{{item.Level}}" required ng-model="item.Name" ng-pattern="/^[-a-zA-Z0-9,._' ]*$/" type="text">
<div ng-messages="subForm[$index+1].$error" ng-if="dg.showErrors">
<div ng-message="required">Level {{$index+1}} is mandatory</div>
<div ng-message="md-maxlength">should be less than 32 characters long.</div>
<div ng-message="duplicate">Level {{$index+1}} is a duplicate name</div>
<div ng-message="pattern" class="my-message">Level {{$index+1}} is an invalid name</div>
</div>
</md-input-container>
</div>
Any suggestions where I am going wrong?
<div class="inputbox-area" ng-form='subForm'>
<md-input-container class="md-block" ng-repeat="item in dg.inputArr">
<label>Level {{$index+1}}</label>
<input md-maxlength="32" maxlength="32" ng-model-options="{ updateOn: 'submit' }" ng-change="dg.showErrors = false" name="{{item.Level}}" required ng-model="item.Name" ng-pattern="/^[-a-zA-Z0-9,._' ]*$/" type="text">
<div ng-messages="subForm[$index+1].$error" ng-if="dg.showErrors">
<div ng-message="required">Level {{$index+1}} is mandatory</div>
<div ng-message="md-maxlength">should be less than 32 characters long.</div>
<div ng-message="duplicate">Level {{$index+1}} is a duplicate name</div>
<div ng-message="pattern" class="my-message">Level {{$index+1}} is an invalid name</div>
</div>
</md-input-container>
</div>
The problem is your model getting updated each time an event fires so add ng-model-options="{ updateOn: 'submit' }" in your input box this will fire only when you submit that form
Im not 100% sure, but i think ng-messages should refer to the name of the input field like this:
ng-messages="subForm.{{item.Level}}.$error"
I dont know if this sintax is gonna work, but try it out and see if it does.
I've got a table of packages produced by ng-repeat. I'm using bootstrap validation. It works fine on pages where there's only one record requiring input, but here I'm dealing with a repeater.
<form name="packingVm.PackageForm" ng-submit="packagingVm.ShipNow()" novalidate ng-init="submitted=false">
<table>
<thead>
<tr>
<th>Package Id</th>
<th>Width</th>
</tr>
</thead>
<tbody data-ng-repeat="package in packagingVm.Packages track by $index">
<tr>
<td>{{package.Id}}</td>
<td class="col-xs-1">
<input name="Width" class="form-control input-inline input-sm" type="text" ng-model="package.Width" required valid-number />
<div class="error-message" ng-show="packagingVm.PackageForm.Width.$invalid && packagingVm.PackageForm.Width.$touched || package.submitted">
<span ng-show="packagingVm.PackageForm.Width.$error.required">Required.</span>
</div>
</td>
</tr>
</tbody>
</table>
</form>
What's happening is the rows are locked together. Getting an error on one row shows the error message on all rows.
I mean, I get why - I only have one packagingVm.PackageForm.Width, not one per row - but I don't know how to fix it.
Searching for bootstrap required ng-repeat isn't getting me much joy.
Answered here:
AngularJS required field validation in ng-repeat
Make the control name, and all references to it, dynamic, by adding {{$index}} to it, thus:
<tbody data-ng-repeat="package in packagingVm.Packages">
<tr>
<td>{{package.Id}}</td>
<td class="col-xs-1">
<input name="Width_{{$index}}" class="form-control input-inline input-sm" type="text" ng-model="package.Width" required valid-number />
<div class="error-message" ng-show="packagingVm.PackageForm.Width_{{$index}}.$invalid && packagingVm.PackageForm.Width_{{$index}}.$touched || package.submitted">
<span ng-show="packagingVm.PackageForm.Width_{{$index}}.$error.required">Required.</span>
</div>
What I can see, you are using the repeat for packagingVm.Packages but the required parts are dependent on packagingVm.PackageForm. You should have the specific required properties for each package(input). Else for all the inputs, one property of the controller is changed on which all required divs are dependent. So it shows for all the inputs.
Hi all I have used the following example to generate dynamic table as per my need
https://jsfiddle.net/shanidkv/vbft1sc4/
Modified the table as per my own with my own error class
<tbody>
<tr ng-repeat="personalDetail in personalDetails">
<td>
<input type="checkbox" ng-model="personalDetail.selected" /></td>
<td>
<div class="form-group" ng-class="{'has-error': rc.loginForm.needsAttention(loginForm.firstname)}">
<div class="col-sm-12">
<input type="text" name="firstname" class="form-control" ng-model="personalDetail.fname" required />
<span class="help-block" ng-show="loginForm.firstname.$error.required">Required</span>
</div>
</div>
</td>
<td>
<div class="form-group" ng-class="{'has-error': rc.loginForm.needsAttention(loginForm.lastname)}">
<div class="col-sm-12"> <input type="text" name="lastname" class="form-control" ng-model="personalDetail.lname" required />
<span class="help-block" ng-show="loginForm.lastname.$error.required">Required</span></div>
</div>
Required
Every thing works fine but when I add a second row after filling the data validation is not firing can some one help me
First click of Save
After filling data if I add another row validation for second row is not applying
The problem is, All the input box for first name/last name/email is creating for the same name. so during validation it is not able to recognized the current empty field.
Better solution, you can create a directive which will be added to the text box which will check the field validation and put the error class accordingly.