I'm creating an optional part of a form. Once one of the two elements is selected (or text has been entered) the other is required but if there is no input for both these fields are not required. Can I accomplish this with ng-required? If not is there another way? Thanks for the help in advance!
Example Form
You can just do a ng-required with the other model as parameter:
<input ng-model="myFirstInput" />
<input ng-model="mySecondInput"
ng-required="myFirstInput" />
If the first input is filled in, myFirstInput will evaluate to truthy, so the second input will be required.
See this jsfiddle
you can use ng-required directive
<form name="myForm">
Click here to make the input field required:
<input type="checkbox" ng-model="myVar"><br><br>
<input name="myInput" ng-model="myInput" ng-required="myVar">
<h1 ng-if="!myForm.myInput.$valid">The input field cannot be empty</h1>
</form>
Related
I have a form, and the form has multiple inputs that are all bound to different variables. Before submitting the form, I need to do validity checks, pristine checks, etc. For example, I want my submit button to be disabled if every part of the form is pristine, or if something is invalid.
Using Angular 5, I am trying to get access to the .pristine, .valid, and .invalid flags for each input field, but the values are either undefined or "cannot get .pristine of undefined".
I am able to get these flags on the entire form itself, but this doesn't help, because I want to know how to get it for each individual input.
Here is my current code (I've removed a number of my inputs to simplify the example).
<form #editDetailsForm="ngForm" name="editDetailsForm" >
<label for="name"> Name </label>
<input type="text" id="name" name="name" maxlength="40" [(ngModel)]="myName" required />
<label for="description"> Description </label>
<textarea id="description" name="description" maxlength="250" [(ngModel)]="myDescription" required ></textarea>
<button id="submit" type="button"
[disabled]="saveButtonDisabled(editDetailsForm.invalid, editDetailsForm.name.invalid, editDetailsForm.description.invalid)"
(click)="updateDetails()" >
Save
</button>
</form>
If you see, I bind disabled attribute on the Save button to saveButtonDisabled() function, where I want to pass in information about each input's validity. The first argument, editDetailsForm.invalid returns a true or false, but the other values return undefined.
How do I check validity of these individual inputs?
EDIT: I realize I can derive all of this info inside my component because all of the input values are bound. However, it'd be easier just to check a flag or two.
I'm not sure I totally understand what you want to do, but this is how you get access to the form controls .pristine, .invlaid
<input type="text" id="name" name="name" #name="ngModel" maxlength="40" [(ngModel)]="myName" required />
The #name="ngModel" sets a template reference to the FormControl angular creates
Then you should be able to do something like this:
<input type="text" id="name" name="name" #name="ngModel" maxlength="40" [(ngModel)]="myName" required />
<div *ngIf="name.pristine">
Name is Pristine
</div>
Just to clarify, the individual form fields bubble up to the form itself. So if any field has been touched, then the whole form will be pristine == false.
You can access the input controls using the .controls property, like:
<button id="submit" type="button"
[disabled]="editDetailsForm.controls.name?.invalid || editDetailsForm.controls.description?.invalid">
Created a stackblitz. https://stackblitz.com/edit/angular-5ir4k7
Added template reference variable for ngModel and validate using isValid.
I have a checkbox, based on value of its ng-model, I'm toggling visibility of a div using ng-show.
This div contains an <input> of type="number". I have a validation on it of min="10000".
I dont want the form to get submitted if the number input is less than 10000.
However, I want this only to happen when the checkbox is checked.
So, I'm using ng-required to check the value of checkbox.
<input type="checkbox" ng-model="isOn"/>
<div ng-show="isOn">
<input type="number" min="10000" ng-model="counter" ng-required="isOn"/>
</div>
If someone proceeds without touching the checkbox and the input field, the form get submitted.
However, if I click the checkbox, enter a number<10000, and the uncheck it again, the form doesn't get submitted.
On the console I get error that it cannot focus on the the input control.
The ng-required fails to work on the min condition. It is being checked regardless of ng-required.
Is there any way I can get this working?
PS: I dont want to use the solution with text input + length limit + restricted char codes on key press so that only numbers could be typed.
you need to reset the model of the number input field to its initial state as well when user unchecks the checkbox.
I used ng-if instead of ng-show and it worked.
I had tried it before I posted the question, but it didnt work. Later I realized I had done the change on a different html file.
I hope this should work
<form name="MyForm" novalidate >
<input type="checkbox" ng-model="MyForm.isOn" required/>
<div ng-show="MyForm.isOn.$touched||MyForm.$submitted">
<span class="errormsg" ng-message="required" ng-show="MyForm.counter.$error.required">Please select the checkbox</span>
</div>
<div ng-show="MyForm.isOn">
<input type="text" ng-model="MyForm.counter" required min="1000" />
<div ng-show="MyForm.counter.$touched||MyForm.$submitted">
<span class="errormsg" ng-message="required" ng-show="MyForm.counter.$error.required">You can't leave this empty</span>
<span class="errormsg" ng-message="required" ng-show="MyForm.counter.$error.min">Value should be atleast 1000</span>
</div>
</div>
</form>
I am disabling the inputs using the isFetching prop,
but this is getting reduntant as I have to keep this in every input field.
Is there a way to disable the entire form?
Like a disable property in <form> tag or something?
<form>
<input type="text" disabled={this.props.isFetching} />
<input type="text" disabled={this.props.isFetching} />
</form>
I think this should solve your problem https://stackoverflow.com/a/17186342/3298693.
You should insert your form inside an element <fieldset disabled="disabled">. This will make the whole form disabled.
I had the same issue and this worked for me:
<fieldset disabled={true}>
Where true would be some "prop.setting"...
Just use <input type="text" disabled> wherever you want the input text to be disabled. It hardly takes some time.
1) I have 3 input radio buttons with unique values.
For e.g.
<input type="radio" id="id1" value="This is first value" />
<input type="radio" id="id2" value="This is second value" />
<input type="radio" id="id3" value="This is third value" />
2) Next, I have 2 hidden form like this:
<form action="//mysite.com/process1.php"><input type="hidden" id="uniqueid" value=""></form>
<form action="//mysite.php/process2.php"><input type="hidden" id="uniqueid" value=""></form>
3) Based upon whichever radio button the user clicks, I need to copy its value to the value of both the above forms hidden field.
For e.g. If user clicks on radio with id1, then it's value "This is first value" should be copied to both the forms hidden field.
CONSTRAINTS:
1) Have to use javascript or jquery, no server side processing available.
2) Note: both the final forms have one input field, but with same id. This is a constraint.
3) Why? Because based on some other actions on the page, the user gets to see one of the 2 forms. The only difference between them is their action is unique. All fields are same.
WHAT I HAVE SO FAR:
Using this, I am able to copy the value from the radio button to a hidden field's value, but it only copies to a field with a UNIQUE ID.
var $unique = $("#unique");
$("#radio1").keyup(function() {
$unique.val(this.value);
});
$("#email").blur(function() {
$unique.val(this.value);
});
Can someone guide as to how can the value be copied to multiple input fields, but with same id's?(Yes, the id's of the initial radio buttons can be unique.)
Having two HTML elements with same ID is an error.
You cannot treat this as a constraint, this is NOT a valid HTML code and it will cause inconsistent behavior in different browsers.
Use classes instead:
<form action="//mysite.com/process1.php"><input type="hidden" class="uniqueid" value=""></form>
<form action="//mysite.php/process2.php"><input type="hidden" class="uniqueid" value=""></form>
And javascript:
var $unique = $(".uniqueid");
However, I couldn't find any #radio1 or #email in your code, are you sure you have the right selectors?
My recommendation for the JS will be: (Working jsFiddle)
var $unique = $(".uniqueid");
$('input[type="radio"]').click(function(){
$unique.val(this.value);
});
Notes for jsFiddle:
I've used click event instead of keyup (don't really understand why you used keyup here..).
I've given all radio buttons the same name so they will cancel each other out when selected.
I've turned the hidden fields to text so you could see the result.
<form action="//mysite.com/process1.php"><input type="hidden" class="uniqueid" id="uniqueid" value=""></form>
<form action="//mysite.php/process2.php"><input type="hidden" class="uniqueid" id="uniqueid" value=""></form>
var $unique = $("input[type=hidden].uniqueid");
$("#radio1").keyup(function() {
$unique.val(this.value);
});
$("#email").blur(function() {
$unique.val(this.value);
});
As said by others, id must be unique. Try using a data-attribute:
<form action="//mysite.com/process1.php">
<input type="hidden" data-shouldupdate="true" value="">
</form>
<form action="//mysite.php/process2.php">
<input type="hidden" data-shouldupdate="true" value="">
</form>
Now you can use that attribute as selector to do something like:
$('[data-shouldupdate]').val(this.value);
I agree with all other who posted that id have to be unique to have correct HTML document. So if it's possible I strictly recommend you to fix the HTML document to remove all duplicates.
I write my answer only for the case that you can't remove id duplicates because of some reason and you still have the same requirements. In the case you should change the line
var $unique = $("#uniqueid");
to
var $unique = $("*[id=uniqueid]");
The selector *[id=uniqueid] (or just [id=uniqueid]) works slowly as #uniqueid, but it allows you to get all elements with the specified id attribute value. So it works even in case of id duplicates on the HTML page.
The most simple solution is to give a same name to both inputs. Check this link jsfiddle to see a working example. The code used is the one given is below:
HTML:
<input type="radio" name="copiedValue" id="id1" value="This is first value" />
<input type="radio" name="copiedValue" id="id2" value="This is second value" />
<input type="radio" name="copiedValue" id="id3" value="This is third value" />
<form action="//mysite.com/process1.php"><input name="uniqueid" id="uniqueid" value=""></form>
<form action="//mysite.php/process2.php"><input name="uniqueid" id="uniqueid" value=""></form>
jQuery/javascript:
$("input:radio[name=copiedValue]").click(function() {
$("input[name=uniqueid]").val($(this).val());
});
The radio-buttons should have the same name. I removed the type="hidden" so u can see it working correctly.
Hope it useful!
In my HTML code I have the following input field, which is part of a form:
<input type="text" name="group[{$sConfigurator.groupID}]" value="{$optionTopOptionID}" id="{$formSelectID}" onChange="this.form.submit();"/>
The value is changed by a javascript function. The problem is, that the submission of the form isn't triggered. How can I do this?
it seems everything is right. try it with a submit input type and lower case of onchange:
<form action="example.php">
<input type="text" name="group[{$sConfigurator.groupID}]" value="{$optionTopOptionID}" id="{$formSelectID}" onchange="this.form.submit();"/>
<input type="submit" name="blabla" value="push!" />
</form>
is it works?