I´m using Angular 2 and i want to do a form Validation.
Here´s my input:
<td><input type="number" class="form-control" min="0" max="100" step="1" pattern="^([0-9]|[1-9][0-9]|[1][0][0])?" name="postEpg" [(ngModel)]="selectedTimer.PostEPG"></td>
My problem now is, that the validation says, this is incorrect, when i don´t fill the field...
But the field ISN´T required, so it should be ok, if theres nothing...
But if there´s something, it has to match the pattern...
Has anyone an idea how to reach this?
Thanks!
What about simply modifiying the pattern like:
pattern="^$|^([0-9]|[1-9][0-9]|[1][0][0])?"
This should allow an empty string or your pattern.
Related
I have this text box element.
<input type="text" name="textbox" class="box-input ng-pristine ng-scope md-input ng-empty ng-valid ng-valid-required ng-touched" ng-required="field.required" ng-model="$ctrl.model[field.nameField.uuid]" ng-disabled="::field.readOnly" id="input_15" aria-invalid="false" style="">
In protractor how should I use it to locate the element? I am not quite sure how to use ng-model="$ctrl.model[field.nameField.uuid]"
If you are using angular 2 or above by model might not work for you, see here.
You could still use the model attribute to identify your element through css like so
$('[ng-model="$ctrl.model[field.nameField.uuid]"]')
or
element(by.css('[ng-model="$ctrl.model[field.nameField.uuid]"]'))
try like this
let input = element(by.model('$ctrl.model[field.nameField.uuid]'));
I suggest to use unique ID if its possible, or some unique class styles leading to single element.
Below is the tag for a password field in Login form.
Our guys used the same class name for EMail field also. Hence I cannot use className for password to locate it in protractor, since xpath and css(id design changes) are not reliable, what is the best option for me?
Tag for Email field:
<input class="native-input sc-ion-input-md" aria-labelledby="ion-input-0-lbl" autocapitalize="off" autocomplete="off" autocorrect="off" name="ion-input-0" placeholder="" required="" type="email">
Tag for password field:
<input class="native-input sc-ion-input-md" aria-labelledby="ion-input-5-lbl" autocapitalize="off" autocomplete="off" autocorrect="off" name="ion-input-5" placeholder="" required="" type="password">
For submit button:
<ion-button _ngcontent-rbh-c129="" type="submit" color="loginbutton ion-margin" class="ion-color ion-color-loginbutton ion-margin md button button-solid ion-activatable ion-focusable hydrated">Login</ion-button>
I don’t suggest you to go with ion-input properties since it’s Ionic related properties generated during the build process and it can be dynamic.
Use type instead since it is:
Obvious
Static
input[type="email"]
And
input[type="password"]
After some time you will have hard time understanding your own code and trying to recall what ion-input-0
refers to.
By css:
element(By.css('input[name="ion-input-0"][type="email"]')),
and:
element(By.css('input[name="ion-input-5"][type="password"]')),
I am trying to identify an element in the following code to automate the input of a text field using protractor, any comments are much appreciated & here is the code,
<input ng-disabled="!cell.editable"
name="99286434"
class="form-control ng-pristine ng-valid ng-valid-required ng-touched"
ng-class="{'is-required':cell.field.required && !xxx.xxx.data}"
ng-model="xxx.xxx.xxx"
ng-change="dataChanged(cell)"
ng-required="cell.field.required"
ng-trim="false"
type="text">
Thanks in advance.
You can use by.model
element(by.model('xxx.xxx.xxx'))
or
element(by.css('input[ng-model="xxx.xxx.xxx"]'))
If both can't work, check the element inside a frame, add some sleep/wait prior to find the element.
I have a form in Angular 2 with a simple validation using Validators.
The html template
<form role="form" #myForm="ngForm" (ngSubmit)="submit()" novalidate [ngFormModel]="form">
<div class="form-group list-element">
<label for="name">name*</label>
<input type="text" name="name" class="form-control" ngControl="name"
#name="ngForm" placeholder="Enter name" [(ngModel)]=user.name >
</div>
</form>
The ControlGroup for the validation
ngOnInit() {
this.form = new ControlGroup({
name: new Control('', Validators.compose([
Validators.required,
Validators.pattern("(([a-zA-Z ]|[0-9])+)*"),
Validators.minLength(5),
Validators.maxLength(80)
]))
});
}
When I type fast (random) characters in the input field (e.g #1KZBZKBjkndedjk###kjbzdzdékj!) the application crashes. This does not happen always so I have not really noticed a pattern.
This is the place where the crash happens, so I think the crash has something to do with the pattern.
That's a known issue https://github.com/angular/angular/issues/7822 and will probably be fixed when this pull request lands https://github.com/angular/angular/pull/7421
First of all this is not related to AngularJS.
This happens because your pattern is wrong I don't know what pattern you need but for example if you need to validate email then use this pattern
& Just Check for your pattern nothing else.
your code....
Validators.pattern("^[_a-z0-9]+(.[_a-z0-9]+)#[a-z0-9-]+(.[a-z0-9-]+)(.[a-z]{2,4})$"),
your code ends...
That it!
I'd like my form to include a certain value if the quantity is equal to 1 (via a text box).
I've managed to show what the total cost is using JavaScript and I could submit it with this value but I'm worried that when JavaScript is turned off the user will be able to submit the form without the extra fee being added. Therefor escaping the fee.
<form>
<label>Qunatity</label>
<input type="text" name="qyt" />
<input type="text" name="fee" value="250" />
<div class="total">[whatever the total is]</div>
<input type="submit" value="submit" />
</form>
Is there a way I can submit this form so that it submits 250 only if a quantity of 1 is added to the form? I'd like to avoid using a select input.
Will I need to split my form out into two stages to achieve this?
You need to check your logic in server-side code.
Most people have Javascript enabled, so you should do it in Javascript to provide a better experience, but you must always reproduce the logic on the server.
If you need to validate your input without JavaScript, have a server-side component (PHP?) to do the job and return the same form with an error message if no quantity was given. That way you don't have to split your form into two steps.
The best/safest way to handle this would be to do your total calculation on the server side. That way the data you store will always be correct.