I have the following problem when using ngprime, when the page loads the input is buggy. If I click on the input it is correct, according to the second photo.
Can you help me with this?
I installed prime flex, prime ng. I imported the styles in angular.json
formulario: FormGroup = this.fb.group({
email: [null, [Validators.email, Validators.required]],
password: [null, Validators.required]
});
<form [formGroup]="formulario" class="p-fluid mt-5">
<fieldset class="field">
<label for="password" class="block">Email</label>
<span class="p-input-icon-left my-2">
<i class="pi pi-user"></i>
<input id="email" formControlName="email" type="email" pInputText placeholder="Email">
</span>
</fieldset>
<fieldset class="field mt-2">
<label for="password" class="block">Password</label>
<p-password id="password" formControlName="password" [toggleMask]="true" promptLabel="Ingresa tu contraseña"
weakLabel="Débil" goodLabel="Buena" strongLabel="Fuerte">
</p-password>
</fieldset>
</form>
It appears to be a known bug in the component. You can see the thread on GitHub here.
There's a workaround until they fix it. Add the following attribute to the p-password element:
styleClass="p-password p-component p-inputwrapper p-input-icon-right"
Like this:
<p-password id="password"
[toggleMask]="true"
promptLabel="Ingresa tu contraseña"
weakLabel="Débil" goodLabel="Buena" strongLabel="Fuerte"
styleClass="p-password p-component p-inputwrapper p-input-icon-right">
</p-password>
Related
I have just started with Cypress and it got my attention. However, when I try to be more specific with my testing I am finding it hard. The page which I am trying to automate has a form which looks like this:
<form>
<div class="mb-3">
<div class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth">
<label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated Mui-error Mui-error" data-shrink="false">Email address</label>
<div class="MuiInputBase-root MuiInput-root MuiInput-underline Mui-error Mui-error MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"><input aria-invalid="true" name="email" placeholder="Enter your email address" type="email" class="MuiInputBase-input MuiInput-input" value=""></div>
<p class="MuiFormHelperText-root Mui-error">Please enter a valid email address</p>
</div>
</div>
<div class="mb-3">
<div class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth">
<label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated Mui-error Mui-error" data-shrink="false">Password</label>
<div class="MuiInputBase-root MuiInput-root MuiInput-underline Mui-error Mui-error MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"><input aria-invalid="true" name="password" placeholder="Enter your password" type="password" class="MuiInputBase-input MuiInput-input" value=""></div>
<p class="MuiFormHelperText-root Mui-error">Password should have minimum of 8 chars.</p>
</div>
</div>
<div class="mb-3">
<div class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth">
<label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated" data-shrink="false">Confirm password</label>
<div class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"><input aria-invalid="false" name="password_confirm" placeholder="Confirm password" type="password" class="MuiInputBase-input MuiInput-input" value=""></div>
</div>
</div>
<div class="form-group pt-2 mb-4">By clicking the <strong>Create account</strong> button below you agree to our terms of service and privacy statement.</div>
<button class="MuiButtonBase-root MuiButton-root MuiButton-contained mb-5 MuiButton-containedPrimary MuiButton-containedSizeLarge MuiButton-sizeLarge" tabindex="0" type="submit"><span class="MuiButton-label">Create Account</span><span class="MuiTouchRipple-root"></span></button>
</form>
Here I have error messages associated to 'email' and 'password' fields, both elements in a under respective 's.
I can validate the error messages by using below statement easily:
cy.get('p').contains('Please enter a valid email address')
and
cy.get('p').contains('Password should have minimum of 8 chars')
But what I want to do is, get the element and find the child of my div element and then get the text of my element.
Why I want to do this is to make sure that the error message that I am trying to validate actually corresponds to my test element.
How can I achieve it?
Thanks in advance!
You can do this by traversing the DOM from your helper text:
cy.get("p")
.contains("Please enter a valid email address")
.then(($el) => {
expect($el.siblings("label").text()).to.eq("Email address");
});
cy.get("p")
.contains("Password should have minimum of 8 chars")
.then(($el) => {
expect($el.siblings("label").text()).to.eq("Password");
});
Im using the Angular 4 built in email input validator. It works, but I can only see the information in the small popup. Is it possible to display it in paragraph, below the input?
My input code:
<input type="email" class="form-control" id="inputEmail" aria-describedby="emailHelp" placeholder="Enter email" [(ngModel)]="eMail" email pattern="[a-zA-Z0-9.-_]{1,}#[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}" required>
Thanks!
You can do this :
In your HTML :
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" formControlName="email" required>
<div [hidden]="!(myForm.controls.email?.dirty && myForm.controls.email?.invalid)">
<small class="form-text text-danger"
[hidden]="!myForm.controls.email?.errors?.required">This field is required</small>
<small class="form-text text-danger"
[hidden]="!myForm.controls.email?.errors?.pattern">Wrong format error message</small>
</div>
</div>
And in your app.component.ts file :
this.myForm = fb.group({
...
email: new FormControl('', Validators.pattern(Regex.EMAIL))
});
For your patterns :
export class Regex {
public static EMAIL = '^[a-z0-9]+(\\.[_a-z0-9]+)*#[a-z0-9-]+(\\.[a-z0-9-]+)*(\\.[a-z]{2,15})$';
...
}
I am trying to combine input text with HTTP get. I tried some methods it works but it' doesn't what I want. I have some URL like this http://localhost/web.php?tN=false&f5=kaka
in f5 get some data from input in HTML. This my HTML
<div class="list">
<label class="item item-input item-floating-label">
<span class="input-label"><i class="glyphicon glyphicon-user"></i> Username</span>
<input id="inputPassword" class="form-control" placeholder=" Username" name="loginname" type="text" ng-model="loginData.username" ng-click="submitFunction()" required>
</label>
<label class="item item-input item-floating-label">
<span class="input-label"><i class="glyphicon glyphicon-lock"></i> Password</span>
<input id="inputPassword" class="form-control" placeholder=" Password" name="password" type="password" ng-model="loginData.password" required>
</label>
</div>
and this my controller
$scope.submitFunction = function() {
kaka.falselogin($scope.loginData.username).success(function(data) {
console.log(data);
});
};
My problem is that I must click after input in form username to get data. It's complicated if I must get data after input in form username
anyone has an idea ? Please help me to solve my problem. Thanks
You can just use the ng-change directive.
It'll run the provided function whenever the input`s value changed.
<input id="inputPassword" class="form-control" placeholder=" Username" name="loginname" type="text" ng-model="loginData.username" ng-change="submitFunction()" required>
Considering you issue HTTP requests on each change, you'd basically flood the server.
To solve that issue you can debounce the model so that it takes x ms until the new value will be applied.
ng-model-options='{ debounce: 1000 }'
In combination it would look like this:
<input id="inputPassword" class="form-control" placeholder=" Username" name="loginname" type="text" ng-model="loginData.username" ng-model-options='{ debounce: 1000 }' ng-change="submitFunction()" required>
There you go :)
I have set up validation like this:
_setValidation() {
this._validator = new Validator(this.model)
.ensure("city")
.required()
.length({ minimum: 5, maximum: 200 })
.ensure("emailAddress")
.required()
.email();
// for some reason reporter cannot be named _reporter...
this.reporter = ValidationEngine.getValidationReporter(this.model);
this._subscriber = this.reporter.subscribe(result => this._renderErrors(result));
}
_renderErrors(result) {
this.validationErrors.splice(0, this.validationErrors.length);
result.forEach(error => {
this.validationErrors.push(error);
});
}
And the view looks like this:
<form class="bordered" submit.delegate="searchRestaurants()">
<div class="form-group row">
<div class="col-xs-2 text-right">
<label for="email" class="form-control-label">Email address</label>
</div>
<div class="col-xs-5">
<input type="text" class="form-control" id="email" placeholder="Enter email" value.bind="model.emailAddress & validate" />
</div>
<div class="col-xs-5">
<small class="text-muted">We'll never share your email with anyone else.</small>
<br />
<small class="text-muted">Entered email will be used later on to confirm reservation.</small>
</div>
</div>
<div class="form-group row">
<div class="col-xs-2 text-right">
<label for="city" class="form-control-label">City</label>
</div>
<div class="col-xs-5">
<input type="text" class="form-control" id="city" placeholder="City in which you are looking for a restaurant" value.bind="model.city & validate" />
</div>
<div class="col-xs-3">
<input type="submit" class="btn btn-info" value="Search for restaurants!" />
</div>
</div>
</form>
The problem is that validation isn't run until I press the submit button. This was not the case if I used decorator syntax on my model, like that:
export class RestaurantSearchModel {
#required #length({ minimum: 5, maximum: 200 }) city;
#required #email emailAddress;
}
However in this case there was another problem - the #required validator was not being run (ever!).
What can I do to make any of these two approaches work?
PS. I'm using version 0.3.0 of aurelia-validatejs plugin.
EDIT:
I updated the plugin to latest version (0.4.0), but it still has some bugs... It seems it's unstable AF! :) So now the purpose of this question changes - are any of you aware of any other aurelia validation plugin?
In the end of my page, before closing body, I have this code:
if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
for (var i = 0, form; form = document.forms[i]; ++i)
form.reset();
}
But it doesn't work... It executed, but noting happens... Form still is filled, but when i run same code from firebug it works fine! I also tried wrap code with jQuery(document).ready() function but still no luck... It works only from firebug console...
UPDATE:
<form class="form-horizontal" method="POST" action="{{ route('store_user') }}" autocomplete="off">
{{ csrf_field() }}
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" name="email" placeholder="Enter Email" autocomplete="off">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" autocomplete="off" name="password" placeholder="Enter Password" style="margin-bottom:5px">
<input type="password" class="form-control" autocomplete="off" name="password_confirmation" placeholder="Repeat Password">
</div>
</div>
</form>
If your intention is to prevent the form being auto-completed in Firefox (an annoying feature) then simply mark the form as autocomplete "off"
<form method="post" action="/form" autocomplete="off">
Also check out this document:
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
particularly the section where it says if the autocomplete still persists to try:
autocomplete="nope"
Since this random value is not a valid one, the browser will give up.