如何使用浏览器控制台或javascript在Angular 应用程序中设置输入值？

7d7tgy0s 于 2023-01-01 发布在 Java

关注(0)|答案(1)|浏览(147)

我有一个带登录模态的Angular 应用程序，其中我接受用户输入，如他/她的电话号码。我已经使用[(ngModel)]=phoneNo将此电话号码绑定到组件的phoneNo属性。对于一个案例，我需要以编程方式与此应用程序交互，并通过在输入字段中输入电话号码，然后单击提交按钮来提交登录详细信息。
我尝试过通过设置元素的值来设置input的值，如

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

这只是更新了我在屏幕上看到的值，而不是Angular 组件的属性。因此，当我单击提交按钮时，它接受组件中的默认值或我在网站上使用图形交互输入的值，而不是我想要的值。
我也尝试过使用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>
       ..............

我在浏览器中看到的输入字段元素：

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

JavaScript

来源：https://stackoverflow.com/questions/74966548/how-do-i-set-the-input-value-in-an-angular-app-using-browser-console-or-javascri

1条答案

按热度按时间

yfwxisqw1#

你应该在Angular中使用ReactiveForm。Javascript属性在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);
  }
}

或者，也可以使用setValue方法将整个表单组设置为特定值。

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

我希望这个例子对你来说是清楚的，问题很快得到解决。

赞(0）回复(0）举报 2023-01-01

我来回答

如何使用浏览器控制台或javascript在Angular 应用程序中设置输入值？

1条答案

相关问题

热门标签

最新问答