如何通过浏览器控制台或JavaScript设置Angular应用的输入值？

我有一个带登录模态框的Angular应用，需要获取用户手机号输入。通过[(ngModel)]="phoneNo"将手机号绑定到组件的phoneNo属性，现在要实现编程交互自动填入手机号并提交登录信息，但遇到了属性不同步的问题。

尝试过的方法及问题 #

• 直接操作DOM设置输入框值：

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

  仅更新界面显示，但Angular组件的phoneNo属性未同步，提交时仍使用默认值或手动输入的值。
• 尝试setAttribute("phoneNo", 12345667890)，完全无效。用getAttributeNames查看元素属性，看不到value或phoneNo，这符合预期，因为HTML中未声明这些属性。
• 用querySelector选择元素赋值无效，无法访问组件的实际属性。
• 尝试用Angular的formgroups或formbuilders设置值，但找不到control和setValue方法。

代码片段 #

Angular模板代码 #

<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>
    ..............
</form>

浏览器渲染后的输入框元素 #

<input _ngcontent-vkb-c73="" type="text" id="phone" name="phone" required="" class="form-control special ng-untouched ng-pristine ng-valid">

解决方案 #

方法1：直接修改组件phoneNo属性（推荐） #

既然用了[(ngModel)]双向绑定，直接在组件类中给phoneNo赋值即可自动同步到输入框，无需操作DOM：

// 组件类内执行
this.phoneNo = '1234567890';

输入框会自动更新，组件属性同步，提交时能获取正确值。

方法2：DOM操作后触发Angular变更检测 #

若因特殊场景必须操作DOM，设置值后需手动触发输入事件，让Angular感知变化：

const phoneInput = document.getElementById('phone');
phoneInput.value = '1234567890';
// 触发input事件通知Angular更新绑定
phoneInput.dispatchEvent(new Event('input'));

方法3：统一使用响应式表单（修正FormGroup用法） #

你当前模板同时混用ngModel和formGroup，推荐统一采用响应式表单：

1. 组件类中初始化FormGroup：

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

// 组件类内
phoneForm: FormGroup;

constructor(private fb: FormBuilder) {}

ngOnInit() {
  this.phoneForm = this.fb.group({
    phone: ['', Validators.required]
  });
}

2. 修改模板，移除ngModel，改用响应式表单绑定：

<form 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"
            formControlName="phone"
            required
        />
    </div>
</form>

3. 编程设置值时使用setValue或patchValue：

this.phoneForm.get('phone')?.setValue('1234567890');
// 或使用patchValue
this.phoneForm.patchValue({ phone: '1234567890' });

内容的提问来源于stack exchange，提问作者rohit kumar