0

I have an angular app with a login modal wherein I take user input such as his/her phone number. I have binded this phone no to phoneNo property of the component using [(ngModel)]=phoneNo. For a case, I need to interact with this app programmatically and submit the login details by entering the phone number in the input field and then clicking on the submit button.

I have tried setting the value of the input by setting value of the element like

document.getElementById('phone').value = 1234567890;

This just updates the value that I can see on screen, but not the property of the angular component. Thus, when I click on the submit button, it takes in the default value residing in the component or the value that I enter using graphical interaction on the website, and not the value that I intended.

I have also tried updating the value using setAttribute("phoneNo", 12345667890) method, but that also doesn't work. In fact, if I get the names of the attributes using getAttributeNames method, I don't see any "value" or "phoneNo" attribute, which makes sense because I haven't written these attributes in HTML code.

Using the querySelector method to select the component and then assign the property also doesn't work. The thing is I am not able to get any access to the actual property of this component that I want to change.

I have also tried using formgroups or formbuilders in Angular and then setting the value, but then also I don't see any control and setValue method.

My angular code:

        <form #f="ngForm" id="phone-form" [formGroup]="phoneForm">
            <label for="phone">Phone Number *</label>

            <div class="d-flex input-box">
                <div>+91</div>
                <input
                    type="text"
                    class="form-control special"
                    id="phone"
                    name="phone"
                    [(ngModel)]="phoneNo"
                    required
                />
            </div>
       ..............

The input field element that I see in browser:

<input _ngcontent-vkb-c73="" type="text" id="phone" name="phone" required="" class="form-control special ng-untouched ng-pristine ng-valid">
rohit kumar
  • 13
  • 3
  • Does this answer your question? [How can I trigger an onchange event manually?](https://stackoverflow.com/questions/2856513/how-can-i-trigger-an-onchange-event-manually) – CollinD Dec 30 '22 at 23:32
  • @CollinD Tried both solutions mentioned here. Still doesn't work. I only see the change in dom. The component property value still remains the old one. – rohit kumar Dec 30 '22 at 23:50
  • You should not use "document" in Angular, you have to send the phoneNo property on submit – nicolascolman Dec 31 '22 at 11:20

1 Answers1

0

You should use ReactiveForm in Angular. Javascript attribution is not a good way in Angular.

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="phoneForm">
      <label for="phone">Phone Number *</label>
      <input
        type="text"
        id="phone"
        name="phone"
        formControlName="phone"
      />
    </form>
  `,
  styles: []
})
export class AppComponent {
  phoneForm = new FormGroup({
    phone: new FormControl('')
  });

  constructor() {
    this.phoneForm.get('phone').patchValue(1234567890);
  }
}

Alternatively, you can also use the setValue method to set the entire form group to a specific value.

this.phoneForm.setValue({
  phone: 1234567890
});

I hope this example is clear to you and the problem is solved quickly.

Behram Bazo
  • 230
  • 2
  • 6