how to validate checkbox state is checked or not in Reactive Forms:
<div class="form-group ng-star-inserted" id="no_empty-group"><label></label><span class="content"><label><input formcontrolname="no_empty" id="no_empty" type="checkbox" ng-reflect-name="no_empty" class="ng-valid ng-dirty ng-touched"> Don't send empty </label></span></div>
I do not see any changes on HTML if I check or un-check this checkbox.
Not sure how to validate in Protractor that checkbox is checked.
for elements of type="checkbox" this should work:
var checkbox = element(by.id('no_empty'));
expect(checkbox.isSelected()).toBe(false); // unchecked
checkbox.click();
expect(checkbox.isSelected()).toBe(true); // checked
Related
I got a user administration and want to check the checkbox before the label with 'test'. The checkbox and label are seperate from eachother. I can't use //input[#type='checkbox'])[3] because the checkbox and label can appear on a different row.
checkbox user
checkbox bla
checkbox trying
checkbox test
html of checkbox: <input type="checkbox" class="ant-checkbox-input ng-valid ng-dirty ng-touched">
html users: <app-userprofile-title _ngcontent-ads-c205="" _nghost-ads-c77="" class="ng-star-inserted">test</app-userprofile-title>
Try using this Xpath
//input[#type='checkbox']//*[contains(., 'test')]
I want to reset all the form fields on successful AMP form submission as I am allowing user for multiple data entry.
Manually I can do it by managing states of each field through amp-bind but I want to reset fields in one go. Is there any function like form.reset present which I can call on form submit success event?
You can use the clear action to reset all fields in a form:
<form id=myForm>
<input>
</form>
<button on="tap:myForm.clear">Clear inputs</button>
You can use submit-success.
<form id=myForm on=submit-success: myForm.clear>
<input name=name value= />
<button>Submit form</button>
</form>
Sounds so simple but I've tried quite a few things and none work.
I'm using Angular 4 and my form is template-driven:
<form #form="ngForm" novalidate>
<label for="insz">{{ 'SEARCH_PAGE.searchInszNumber' | translate }}</label>
<input type="text" name="insz" [placeholder]="'SEARCH_PAGE.searchInszNumber' | translate" #input required>
<button (click)="onSearch(input.value)" ><span>{{'SEARCH_PAGE.search' | translate }}</span></button>
</form>
I want to disable the button when the (one and only) input field is empty.
You are missing ngModel in your input, for your input field to actually be a form control:
<input type="text" name="insz" ngModel
[placeholder]="'SEARCH_PAGE.searchInszNumber' | translate" #input required>
and then you need to disable the button of course if form is not valid:
<button [disabled]="!form.valid" (click)="onSearch(input.value)" >Submit</button>
You could take a look at reactive forms. I had no knowledge of them until a week ago, but they're so powerful !
This means all you need to do is add a Validator (Validators.required in your case), and add a disabled condition to your button. And that's it, you're set.
is there a way to validate multiple checked checkboxes properly?
How are the data been sent?
Something like eyeColor[0] = blue?
<form action="send" method="POST" id="send-form">
<input type="checkbox" id="eyeColor" name="eyeColor[]" value="blue">
<input type="checkbox" id="eyeColor" name="eyeColor[]" value="brown">
<input type="checkbox" id="eyeColor" name="eyeColor[]" value="green">
</form>
"eyeColor" -> seq(text.verifying(enum(eyeColor().keySet.map(_.toString), "error.searchProfile.eyeColor")))
In your controller you get eyeColor as a List[String], as if it was a multiple select. You can not see the ones that are not selected (they're not passed in the http request).
I'm building a form that generates an invitation when submitted. The invitation has several fields, one of which is an email address input with an 'add' button, which when clicked should add that address to a list of email addresses that should receive the invite.
This can be done with a single form, however if the user hits the enter key while typing an email then it triggers submit on the whole form. I'd like to have the enter key result - when the email input field is focused - have the same effect as clicking the 'add' button. I expected that the proper way to solve this would be to nest an email entry form within the invitation form, something like this:
<ng-form ng-submit="sendInvite()">
<input type="text" placeholder="Title" ng-model="invitation.title"/>
<ng-form ng-submit="addInvitee()">
<input type="email" placeholder="Title" ng-model="inviteeEmail"/>
<button class="btn" type="submit">add</button>
</ng-form>
<button class="btn" type="submit">Send</button>
</ng-form>
With the following javascript in the controller:
$scope.addInvitee = function() {
$scope.invitation.emails.push($scope.inviteeEmail);
$scope.inviteeEmail = '';
}
$scope.sendInvite = function() {
//code to send out the invitation
}
My problem is that having nested the forms (and in doing so converted from <form> to <ng-form>, submitting either one no longer works.
Plunker here
I've similar requirement - wizard driven multi-step form. When user clicks 'Next' button, I've to validate the current step form.
We can trigger validation by firing '$validate' event on the scope bound to the form.
isFormValid = function($scope, ngForm) {
$scope.$broadcast('$validate');
if(! ngForm.$invalid) {
return true;
}
}
When ever I want to check if the form values are correct, I'll call isFormValid with the scope & form instance.
Working code: Plunker link
It is also useful to have few additional logic in isFormValid (included in the above Plunker) which makes the form & form fields $dirty as we would be showing/hiding validation messages based on their $dirty state.
You can use one of the following two ways to specify what javascript method should be called when a form is submitted:
* ngSubmit directive on the form element
* ngClick directive on the first button or input field of type submit (input[type=submit])
-- form docs
<ng-form>
<input type="text" placeholder="Title" ng-model="invitation.title"><br>
<ng-form>
<input type="email" placeholder="Title" ng-model="inviteeEmail">
<button class="btn" ng-click="addInvitee()">add</button><br>
</ng-form>
<ul class="unstyled">
<li ng-repeat="invitee in invitation.invitees">
<span>{{invitee.email}}</span>
</li>
</ul>
<button class="btn" ng-click="sendInvite()">Send</button>
</ng-form>
Plunker
When the form is submitted, you can find all nested forms using some thing like below
forms = []
forms.push(form)
nestedForms = _.filter(_.values(form), (input) -> (input instanceof form.constructor) and (input not in forms))
Here, form is the outer form controller which was submitted. You can hook this code on ur onsubmit, and find all nested forms and do whatever you have to.
Note: This is coffeescript