0
354
ViewsHow do I get the input value from a angular form using javascript
I'm a client from a SaaS in which I can custom code with JS.
With this custom JS feature, I'm trying to extend this form page by validating the typed in data.
I found out that jQuery is available and it looks like they use Angular, which is why I'm struggling cuz I only and barely know JS.
Can I get the input value, in the case Andrew, from the form field 'First Name'?
This is the HTML snippet
<div class="form-group ng-scope" id="" ng-if="[true, undefined].includes(entitiesDataVisibility["c1b99979-6b13-51a3-9c0e-ccb878e76655"])">
<label for="field_56657680-c963-45b1-838c-9894dcdb09d0">First Name<span class="required">*</span>
</label>
<input id="field_56657680-c963-45b1-838c-9894dcdb09d0" ng-model="entitiesData["c1b99979-6b13-51a3-9c0e-ccb878e76655"]" class="form-control ng-valid ng-not-empty ng-dirty ng-valid-parse ng-touched" type="text" name="6da5a22b-8d81-4f76-9e9b-0441e5d48a39">
</div>
If I try to Query Select the input by name (the id is dynamical for some reason) with
console.log($("[name='6da5a22b-8d81-4f76-9e9b-0441e5d48a39']"));
I then get:
I apologize if it's too basic :(
2 answers
Answer question0
assuming the id doesn't change then
console.log($("#field_56657680-c963-45b1-838c-9894dcdb09d0").val())
that should get the value for you
but if you afer validation angular has build in validaton that would better suited than jquery, look at using somthing like so
import { FormControl, FormGroup, Validators } from '@angular/forms';
...
searchform = new FormGroup({
search: new FormControl('', [Validators.required, Validators.minLength(3)]),
});
get searchControls() {
return this.searchform.controls;
}
....
<form class="form-inline" [formGroup]="searchform">
<input
type="search"
class="form-control"
placeholder="Enter some data"
name="search"
id="search"
formControlName="search"
required
#search />
<div
*ngIf="searchControls['search'].touched
&& searchControls['search'].invalid"
class="alert alert-danger">
<div
*ngIf="searchControls['search'].errors
&& searchControls['search'].errors['required']">
Name is required.
</div>
<div
*ngIf="searchControls['search'].errors
&& searchControls['search'].errors['minlength']">
Name should be 3 character.
</div>
</div>
I hope this helps
0
Assuming following:
- name and id attribute are dynamic
- label text has always exact value. i.e. First Name
- Input element is always below label field.
You can get the value by $('.form-group label:contains(First Name)').next().val()
So above code will find the label element containing First Name label element and selects the sibling element below it i.e. Input Element
Hope that helps!