How do I get the input value from a angular form using javascript

Question

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 :(

Answer 1

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

Answer 2

Assuming following:

• name and id attribute are dynamic
• label text has always exact value. ie 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 ie Input Element

JSfiddle Link

Hope that helps!