When I'm rendering HTML from on server side (with JSP or another server-side technology) browser suggests me to save login / password inputs.
When I'm using ReactJS to render form I don't those suggestions from browser.
Is there any way to get form autofilling?
There is example of my form from ReactJS code
return (
<div>
<div className="registration-block">
<form onSubmit={e => this.handleSubmit(e)}>
<div className="registration-block-inputs">
<div className="input-block" id="input-block-0">
<div className="input-block-header">E-mail</div>
<input type="text" placeholder="E-mail" name="login" id="login"
value={this.state.login}
onChange={this.handleInputChange}/>
</div>
{passwordInput}
<SubmitButton buttonName={this.props.buttonName} processing={this.state.processing}/>
</div>
</form>
</div>
{popup}
</div>
);
You want to use the type="password" or type="email" HTML attributes so that the browser can determine the kind of information the input is accepting.
All the form attributes are set by putting certain attributes on the actual html elements. You use certain elements based on what you want the browser to recommend. On top of that different browsers might use different attributes are various things. I would recommend this resource.
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
Related
Please think in angularjs way.
Actually my layout is different.
I have input fields inside form and also have input fields outside form, this is a special case in my product.
I know about form attribute in HTML5
But
In AngualrJS:
I want to achieve outside form input fields works as good as inside form input field works for validation purpose.
Is it possible? We can not remove the place of form tag.
If Yes please guide me.
<div ng-app="myApp" ng-controller="validateCtrl" >
<h6>Validation Example</h6>
<form id="frm" name="myForm" novalidate>
Inside form
<p>
<input type="submit" ng-disabled="myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
Outside form
<p>Email:<br>
<input form="frm" type="email" name="email" ng-model="email" required>
</p>
</div>
Plunker
I want to test whether my login application displays validation messages correctly. Without adding an id for the form can i check this using ngclass?
<form [formGroup]="authForm">
<div class="form-group">
<label for="email">Email address</label>
<div class="invalid-feedback" *ngIf="authForm.get('email').hasError('required')">
Email is required.
</div>
</div>
</form>
You can validate with the below code. If the alert is displayed in run time. Click inside the field and click on another feild without sending any values.
validationMessage = element(by.css('div.form-group>div');
validationMessage.getText().then((value:string) =>{
expect(value).toBe('Email is required.');
}
For info refer https://www.protractortest.org/#/locators
Hope it helps you
I'm developing a small AngularJS (1.6) app, trying to use a component-based architecture.
On my HomePageComponent, I have three different sub-component A, B and C, which all contains different content such as input fields, datepickers and a list. It should not be possible to navigate to the next page (state) if a validation in any of my sub-components fails. The "Button A" should therefore be disabled - ex. name input field in component A is not set.
However, I can't seem to find a reasonable solution/pattern on how to achieve this functionality while using components.
Does anyone have a proper solution for this?
Thanks in advance
You could consider using a wizard such as angular-wizard . From the github page:
<wizard on-finish="finishedWizard()" on-cancel="cancelledWizard()">
<wz-step wz-title="Starting">
<h1>This is the first step</h1>
<p>Here you can use whatever you want. You can use other directives, binding, etc.</p>
<input type="submit" wz-next value="Continue" />
</wz-step>
<wz-step wz-title="Continuing">
<h1>Continuing</h1>
<p>You have continued here!</p>
<input type="submit" wz-next value="Go on" />
</wz-step>
<wz-step wz-title="More steps">
<p>Even more steps!!</p>
<input type="submit" wz-next value="Finish now" />
</wz-step>
</wizard>
I am trying to create a view to send an email by attaching a file. I just started coding but not sure how to attach .could anybody help me for this.
here is my small code.
<div>
<div> To</div>
<div><input type="text" name="" placeholder="" size="70" /></div>
</div>
<div>
<div>Subject</div>
<div><input type="text" name="" placeholder="" size="70"/></div>
</div>
after this I have to add image and by click that image I have to attach a file and enter message, then click send button.
You could take a look at the ngDroplet module.
Sometimes forms become very complicated and it is impossible to test every case manually after code changes.
I already have unit testing with karma on the project.
Is there any tools or best practices how to test AngularJS form validation with jasmine and karma?
For example how can I test such form with jasmine and karma automatically?
<form name="appForm" novalidate>
<div>
Username: <input type="text" ng-model="data.username" name="username" ng-maxlength="15" required />
</div>
<div>
Email: <input type="email" ng-model="data.email" name="email" required />
</div>
<div>
Age: <input type="number" ng-model="data.age" name="age" />
</div>
<div>
<button ng-click="submit()" ng-disabled="appForm.$invalid">Submit</button>
</div>
</form>
It depends on what you actually want to make sure when testing form validation.
If you want to be sure invalid form will not be submited, then it is one case. And I don't see problems with this case.
If you want to be sure that appropriate messages are displayed for invalid fields, then, for example, you can make a directive, that is aware of all your possible field restrictions ('required', 'ng-maxlength', 'url', etc.) and is responsible for displaying appropriate error messages. So you will need to create tests only for this directive.
Example:
<input type="text" ng-model="data.username" my-directive name="username" ng-maxlength="15" required />
myDirective is aware of required and ng-maxlength restrictions, that were put on the field, & it is responsible for displaying appropriate error messages for invalid state of the field.