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.

Send text field value using href to php

I have to send text field value using href to php is something like below. But it is not correct way. Can anyone please give me any solution?
<input type="text" id="myText" value="Mickey">
<a href="test.php?id=javascript:document.getElementById('myText').value;">
<input type="button" value="Click"></a>

Put content inside a form. You can also change the button type input to a submit type, this way the form is sent automatically on click.
<form method="POST" action="yourURL.php">
<input type="text" id="myText" name="myElement" value="Mickey">
<a href="test.php?id=javascript:document.getElementById('myText').value;">
<input type="submit" value="Click"></a>
</form>
More information on forms: MDN
Whether you use GET or POST as a method, you'll be able to access the content of the form through PHP variables: $_GET, $_POST or the generic $_REQUEST.
More information in the PHP documentation
Note: PHP uses the name attribute of your HTML elements for those variables. Make sure to add this attribute to your HTML elements otherwise you'll have a hard time getting a value from $_REQUEST['myText']. I added the attribute holding the value "myElement" in the above code. It is accessible through PHP by typing $_REQUEST['myElement'].
Content sent through GET method is visible in the URL,
like this: www.example.com/test.php?var1=test&var2=test

<input type="text" id="myText" value="Mickey">
test

how to use handlebars within an html input field?

I have the following code:
{{data.title}}
How can I get handlebars to render the information in the input field onto my html form?
<input class='add-title' name="title" type="text" placeholder="Title" >

You need to add a
value={{data.title}}
tag in the field and stringify it so it looks like this:
"{{data.title}}"

setting variable from input field

I have a form that contains an input field for an email address. The form doesn't have a submit button. Instead it has the Stripe checkout.js script which provides a button that triggers a roundtrip to Stripe (to process a credit card) before submitting the form. The checkout.js script allows an optional variable data-email which makes it possible to pass a preset email address to the Stripe checkout form. I'd like to set the data-email variable with the value of the email address input field on my own form.
Here's the form and the script:
<form role="form" class="new_user" id="new_user" action="/users" method="post">
<label for="user_email">Email</label>
<input class="form-control" type="email" value="" name="user[email]" id="user_email" />
<script src="https://checkout.stripe.com/v2/checkout.js"
class="stripe-button"
data-email=document.getElementById('user_email').value
data-key="stripe_key"
data-description="Product"
data-amount="500">
</script>
</form>
I know I need to use:
data-email=document.getElementById('user_email').value
But the data-email isn't getting set. Do I need to add an onchange property to the input field? What would that look like? Do I need more than that?

If the user is entering his email on the page, you might as well just update the script as they type:
var stripe = document.getElementById("stripe");
document.getElementById("email").onkeypress = function () {
stripe.setAttribute("data-email", this.value);
}
<input id="email">
<script id="stripe"></script>
If you run the snippet and inspect the input element, then type, you'll see the data-email attribute update for the given stripe script tag. You should be able to adapt this to your form.

Is "name" attribute mandatory in <input>, <textarea> and <button> elements?

Is "name" attribute mandatory in <input>, <textarea> and <button> elements? Or maybe we can use id or class instead?

If these tags are inside a form tag and you are subbmitting that
form to a server, then name is required,
If you are just using them for client-side purposes and don't want to send them to server, then it is optional.

Name is not a required attribute. A small quote from the HTML spec:
The name content attribute gives the name of the form control, as used
in form submission and in the form element's elements object. If the
attribute is specified, its value must not be the empty string.
Notice the "if" in the quote, indicating that it is not required, from a standards perspective.
However, if the input is used with the browsers standard form submission, you won't be able to retrieve the value of the input on the server-side, if you don't have a name to refer to.
If you only need to retrieve the value on the client using JavaScript, then you can use an id, a class, or any other means to select the given input - in that case you can leave the name out if desired.

name is what gets sent to php scripts for processing so for example $_POST['Telephone'] when used as <input name="Telephone" type="text">. Not required unless being used for processing really.

No its not, but generally you would want it.
Try this
<?php
foreach($_GET AS $key=>$val)
{
echo "name '$key' has value '$val'<br>";
}
?>
<form>
<input type="text" name="abc">
<input type="text" id="a">
<input type="text" class="b">
<input type="text">
<input type="submit">
</form>