Develop Reference

Angular 2+ multi-part form validation, how to check validity of single input

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.

Passing Disabled Form Input Value On Post Angular2

I have a form which has an email field. I am adding the value of the form field with interpolation. But I do not want the user to be able to change the email address in the form field. So I add the disabled flag to the input field. When I add disabled the form does not pass the email to the http post.
How can I disable this input field but still show the email address init to the user so that it will still post when the form is submitted with the rest of the form data?
<input type="text" class="form-control" id="email"
[(ngModel)]="personal.email" name="email" #email="ngModel" required
value="{{auth.userProfile.email}}" placeholder="{{auth.userProfile.email}}" disabled>
Maybe I am confused about two way data binding but can I not just add the value to it with something like this,
[(ngModel)]="personal.email"
=
{{auth.userProfile.email}}
Then still keep the form input field disabled?

<input type="text" class="form-control" id="email"
[(ngModel)]="personal.email" name="email" #email="ngModel" required
value="{{auth.userProfile.email}}" placeholder="{{auth.userProfile.email}}" readonly>
do not use disable.
if you wanna pass value then use readonly (readonly="readonly").
it will let you post the value

Does a ng-model work on ng-repeated fields?

I am using ng-repeat and I am various levels in such as:
`ul in output.content.innercontent` or `li in ul.content.innercontent`
my input looks like this:
<input id="{{input.key}}" name="{{input.label}}" type="text"
value="{{input.value}}" placeholder="{{input.defaultValue}}"
value="{{input.label}}"
class="form-control input-md" uib-tooltip="{{input.tooltip}}"
ng-if="input.type == 'input'">
On any one of those whenever a change happens and then an onBlur I want to make a call. Is this possible with ng-model & ng-model-options="{updateOn:'blur'}" with all these fields? The bind behavior I see online are mostly of an input to read-only field somewhere. Should I use ng-blur followed with a on("change") type of behavior?

try with
<input id="{{input.key}}" name="{{input.label}}" type="text"
ng-model="{{input.value}}" <!-- this -->
placeholder="{{input.defaultValue}}"
class="form-control input-md" uib-tooltip="{{input.tooltip}}"
ng-if="input.type == 'input'">
ng-model should do it
<input ng-model-options"{updateOn: 'blur'}"/>
==> This update the model only when user get outside the input
To call a function on-blur :
<input ng-blur="callThisFn()"/>

jquery datepicker - how to make readonly and required?

I am creating a form, the customer has requested an 'eventStart' and 'eventStop' range, they also want it to be required, and don't want anyone to be able to manually change the values.
I am using jquery datePicker and jquery validate.
I have it working one way or the other, but not both.
<input class="inputs" type="text" id="eventStart" readonly/>
<input class="inputs" type="text" id="eventStop" readonly/>
This works perfectly, the range works, and it cannot be manually edited.
<input class="inputs" type="text" id="eventStart" required/>
<input class="inputs" type="text" id="eventStop" required/>
This pops up the "! Please fill out this field", but allows the date to be manually edited.
If I put both, it allows the user to skip the field (no validation.)

In this case if you add readonly and required and it bypasses validation your options are to implement your own validation or to hook form submit or the onclick action of your submit button.
Another option is to use required only. Then hook the keydown action and stop text entry.
$("#inputs").keydown(function (event) {
event.preventDefault();
});
This will only stop text entry and is not secure. Sneaky people can still change the value if they want. Don't forget to validate field entry on the backend.

i have this workaround
$nextmonth = date('Y-m-d 23:59:59',strtotime("+1 month"));
and for input
<input type="text" class="text-input" name="project_deadline" id="project_deadline" value="<?php echo $nextmonth ?>" readonly />

radio buttons + input field for one of them

I tried the following but it returns two pieces of data to the server. This is a problem for my gateway, and I get an error.
I used this for one of my attempts:
<script type="text/javascript">
if( $('#other).is('):selected') )
{
// user wants to enter own value
$('[name="installments"]").not('[type="text"]').attr('name', '') // remove all
values apart from the entered text.
}
</script>
<body>
<FORM ACTION="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" METHOD="POST">
<br><br>
<input type="radio" name="installments" id="r1" checked="checked" value="99">
Open-Ended - I can stop them via email at any time.<br>
<label for="installments">number of payments</label><br>
<input type="radio" name="installments" id="other" value="Enter Custom.."><br>
<input type="text" name="installments" value="" maxlength="4" size="4">
<br><br><br>
<input type="submit" name="btnSubmit" value="Submit" />
</form>
This returns either -
installments 99
installments (empty)
or
installments Enter Custom..
installments 5
I can only have one return for the var 'installments' either 99 or the number they imputed.
I have tried various ways of doing this using JS and allowing the user to make a choice with the same results - two instances of the var 'installments' being sent.
Is there a javascript way to test the input field and if a number is entered then disable using id(s) the extra radio button so it can't send any data? Or is there a better way to do this?
Solved
I found the answer & Here it is
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#user_input').change(function() {
$('#use_user_input').val($(this).val());
});
});
</script>
And Html Here:
Total number of payments...</span><br>
<input type="radio" name="installments" checked value="99">
Open-Ended -
<input id="use_user_input" type="radio" name="installments" value="">
limited number of payments -
<input id="user_input" type="text" value="" maxlength="4" size="4"></span>

You would want to give the input text field a different name from the radio inputs, then handle the text field's POST as a separate variable from the radio buttons in the HTTP request. Also, give the second radio input a value, such as "other" so you know to handle the associated text input.

If you only have the ability to receive one field from the form you will need to alter the form as the user fills it in. Currently the form works if the user selects one of the values delimited by the radio buttons. The problem, I gather, is that the status of the radio buttons overrides the value of the text field even if the user selects the "other" option of filling in the text box.
The solution is to use a script that is triggered when the user changes the content of the text box. This script will read the value of the text box and assign that value to the 'other' radio button.
We can do this using the onchange event:
<input id="otherRadio" type="radio" name="installments" value="" /><br />
<input id="otherText" type="text" value="" maxlength="4" size="4" onchange="applyOtherOption()" />
If you try this now, it will cause a javascript error on your page when you change the value of the the text field. This is because the browser fails to find a javascript function with the name applyOtherOption. Let's change that now:
<script type="text/javascript">
function applyOtherOption() {
var textField = document.getElementById("otherText");
var radioField = document.getElementById("otherRadio");
radioField.value = textField.value;
}
</script>
The result is that the "other" radio button's value is always changed to whatever the user enters into the text field and if this radio is selected, this is what is sent with the form.
Important
I've been a bit lazy here and typed out the easiest way to access the content of the form elements. This will work on most (probably all major) browsers but it is not the way it should be done. The proper method is to access the form first, then from the form element access the fields. To do it right you should read this article on setting the value of form elements.
I hope this is useful.