I need to apply a mask both to the Input (which has '.' and',' by default), and to the return (which is inside a tag 'p'). I didn't intend to use jQuery, so I would need another solution, I did some research on some libraries, but I didn't succeed.
Input:
<div class="form-group">
<label for="exampleInputEmail1">Valor Estimado</label>
<input [(ngModel)]="ticket.valorestimado" type="number" class="form-control" id="value"
aria-describedby="emailHelp" placeholder="Valor"/>
</div>
Return value:
<div>
<p class="fz-13">R$ {{ j.valorestimado }}</p>
</div
If you want to format the number 30000 as '30,000.00', you can use the number pipe.
<div>
<p class="fz-13">R$ {{ j.valorestimado | number:'1.2-2' }}</p>
</div>
Edit:
This will use the default locale of your app. See the number pipe documentation for more details: https://angular.io/api/common/DecimalPipe.
I chose the format 1.2-2 for at least 1 integer, and between 2 and 2 (i.e. exactly 2) fraction digits.
From the docs:
Decimal representation options, specified by a string in the following format:
{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
Related
The problem is that my angular code triggers an error on the form controls when I add a white space to the text input.I would like the regex to allow white spaces. I've tried several different regex patterns. I believe the one im currently using should be allow letters and whitespaces.
TypeScript
form = this.fb.group({
title: [,[Validators.required,Validators.pattern("[a-zA-Z\s]+")]],
author: [,[Validators.required,Validators.pattern('/^[a-zA-Z\s]*$/')]],
description: [,Validators.required],
date: [new Date]
})
HTML
<div class="form-group">
<label for="title"> Article Title </label>
<span
style="color: red;font-style: italic"
*ngIf="(mouseOverSubmit || form.controls.title?.touched)
&& form.controls.title?.errors?.required">
Required
</span>
<span
style = "color:red;font-style: italic"
*ngIf= "form.controls.title?.touched
&& form.controls.title?.errors?.pattern">
Only letters and numbers allowed
</span>
<input (ngModel)="title"
name="title"
formControlName="title"
class="form-control"
type="text"
id="title">
</div>
Here is validator example for you
\s Any Whitespace
\S Any Non-whitespace character
Use in this way Validators.pattern("^[a-zA-Z ]*$")
To allow only one space between two words use in this way
Validators.pattern("^[\w+ ?]*$")
With HTML and angular, how can I match input to 2 patterns in order to respectively generate 2 different inline error message? the "pattern" in input tag doesn't can't it.
for example, I want to check if the input start with 0.
If it starts with 0, generate a error message"the number cannot start with 0".
Then I want to check if it's 9 digits long. If it is not 9 digits long, generate a error message "the number should be 9 digits long".
The inline error is supposed to be generated as soon as a invalid input is typed in.
I've tried using formcontrol but it broke the whole page.
<form id="validationForm" #validationForm="ngForm" (ngSubmit)="onFormSubmit(validationForm)">
<div class="row">
<div id="u79" class="large-7 columns" data-label="businessNumber">
<label for="u79_input">
<abbr title="example">e.g.</abbr>{{'BUSINESS-NUMBER-PAGE.EXAMPLE' | translate}}
<input id="u79_input" type="text" value="" name="businessNumber" [(ngModel)] = "businessNumber" required minlength="9" maxlength="9" pattern="^\d{9}$" #uname="ngModel" (focus)="setErrors()" class="no-margin"/>
</label>
<!-- inline error -->
<div *ngIf="!hasErrors" id="error" data-label="inline error">
<div *ngIf="uname.errors?.required && validationForm.submitted && !isValidFormSubmitted">
<small class="error">{{'BUSINESS-NUMBER-PAGE.VAL-MESSAGE-REQ' | translate}}</small>
</div>
<div *ngIf="uname.errors?.pattern && !isValidFormSubmitted">
<small class="error">{{'BUSINESS-NUMBER-PAGE.VAL-MESSAGE-DIGIT' | translate}} </small>
</div>
</div>
</div>
</div>
I think you need just one regex pattern for validation and you can manipulate that with the length of characters in your input field. The regex to match 9 digit number not starting with 0 is
^[1-9]\d{8}$
You can see the validation and the appropriate error messages in the demo I created HERE
This shows 3 types of errors
When the field is empty
The number starts with zero
The number is not 9 digits long
I'm rendering a WTForms TextAreaFields with Jinja2 in a Flask application and it has it's own HTML code as its prepopulated text value, although the default property (which should specify the prepopulated value) is set to empty string ''.
Form definition:
channels = TextAreaField('channels', default='')
Jinja2 template HTML file:
{% for c in e.form.conditions %}
{{ c.form.channels }}
{% endfor %}
Result (rendered, visible to end-user, should be empty string ''):
<textarea id="channels" name="channels"></textarea>
... (other iterations)
Result (HTML):
<textarea class="form-control" id="conditions-0-channels" name="conditions-0-channels"><textarea id="channels" name="channels"></textarea></textarea>
... (other iterations)
I double-checked using the Pycharm debugger and the TextAreaField as a whole object shows as the HTML result above, even though none of its properties contain the visible result string (also above), and the default property is equal to '' even though the result doesn't show so.
Bonus hint: for some reason, if the form containing the channels field is not part of a FormField inside a WTForms FieldList, this problem does not occur.
I don't know what on earth is going wrong with this combination of FieldList, FormField and TextAreaField, but if you call {{ c.form.channels.data }} (with extra .data) in your Jinja2 template HTML file instead of {{ c.form.channels }} then everything works fine.
Wow THANK YOU! I'm not sure what's going on either but this solved the issue for me too. I had some similar findings shown below:
Forms.py
class ChannelForm(FlaskForm):
notes = TextAreaField('Notes', render_kw={'class': 'form-control'}, default="")
channels.html
# These:
{{ channels.notes.data }} # Working solution
{{ channels.notes(value="test Value") }}
# Render these:
<textarea class="form-control" id="notes" name="notes"></textarea>
<textarea class="form-control" id="channels-0-notes" name="channels-0-notes" value="Test Value"><textarea class="form-control" id="notes" name="notes">
Test</textarea>
I want to increment value of $index in ng-repeat. For example:
<div ng-repeat:x in ProductList">
<label>{{x}}</label> // if x = 1
x++; // this is the line i need
<label style="color:red">{{x}}</label> // x index should be equal to 2
x++; // this is the line i need
<label style="color:blue">{{x}}</label> // x index should be equal to 3
</div>
in the second time the loop runs, the x index needs to be '4'
You can simply do following:
<div ng-repeat="product in ProductList">
<label>{{$index}}</label>
<label style="color:red">{{$index + 1}}</label>
</div>
If I understand your question correctly (which is hard to understand), you want to perform different actions for even and odd indexes in your ng-repeat. You could use the special properties $even and $odd from ng-repeat.
<div ng-repeat="x in ProductList">
<label ng-if="$odd">{{x}}</label>
<label ng-if="$even" style="color:red">{{x}}</label>
</div>
If this does not help you, try to give an example of what output you are expecting.
You are trying to print index value in diff element for each item in your array,
what i will suggest is to create a custom directive and use it on different element here is "label", that we increment the count of index.
My target is to search my notes by Title and truncate Body by a letters or words limit. I don't know if its possible to do that and how. I don't want to mess up with any custom filters , directives etc.
This is a idea of the html:
<section class="notespage" ng-controller="NotesController">
<h2>Notes list</h2>
<div>
Search:
<input type="text" ng-model="searchText">
</div>
<div class="notesleft">
<div class="notelist">
<div ng-repeat="note in notes | filter:searchText | truncate:{body:letterLimit}">
<div><h3>{{note.title}}</h3></div>
<div>{{note.body}}</div>
</div>
</div>
</div>
</section>
Where this should be ? In NotesController ?
$scope.letterLimit = 20 ;
Since you don't want to "mess up" with custom filters etc, you can use the built-in limitTo filter to limit the number of characters displayed as note.body:
$scope.letterLimit = 20;
<div>Search:<input type="search" ng-model="searchText" /></div>
<div ng-repeat="note in notes | filter:searchText">
<div><h3>{{note.title}}</h3></div>
<div>{{note.body | limitTo:letterLimit}}</div>
<div>
See, also, this short demo.