javascript - 是否有使用 Angular 自动填充表单的快捷方式？

Question

我正在一个项目中，我将添加一个收据，该收据将在用户提交表单后显示。没有有效的方法来测试表格，因为我每次都必须填写表格以确认问题和答案是否进入收据。
我想创建一个临时的单一方法autoFill()它与 anchor 元素相关联，以便自动用答案填写表格。在 Javascript 中，我可以用 document.getElementById('id').value = myValue 之类的东西来做到这一点。 ，但在 Angular 中似乎没有办法以这种方式设置输入元素的值。
相反，我必须通过编写输入设置来重写组件中的所有输入字段。
我见过的所有示例都包括重写组件本身，如下所示:

@Component({
  selector: 'app-click-me',
  template: `
    <button (click)="onClickMe()">Click me!</button>
    {{clickMessage}}`
})
export class ClickMeComponent {
  clickMessage = '';

  onClickMe() {
    this.clickMessage = 'You are my hero!';
  }
}

但我不想更改原始代码。
我也不想安装任何像 Selenium 这样的依赖项，尽管这将是一个不错的选择。
没有更简单的方法吗？
这就像我正在寻找能够调用 Angular 项目的东西:

autoFill() {
    document.getElementById('input1').value = "myTextValue";
    document.getElementById('input2').value = "Dropdown2";
  
    var radioElements = document.getElementsByName("input3");
  
    for (var i=0; i<radioElements.length; i++) {
      if (radioElements[i].getAttribute('value') == 'Radio3') {
        radioElements[i].checked = true;
      }
    }
  }

Answer 1

根据this，如果您使用 react 形式来管理您的 Angular 形式，则可以。 ，在您的模板中声明您的表单控件:

<form [formGroup]="myForm">
<input formControlName="input1">
</form>

在你的 typescript 中:

this.myForm.input1.setValue('');

或者

this.myForm.patchValue({input1: '', input2 : ''});

注意:在能够修补/修改输入值之前，您需要按照文档中的说明声明它，我最喜欢的方式如下:

export class MyComponent {
   myForm: FormGroup

   constructor(private fb: FormBuilder){
     this.myForm = this.fb.group({
       input1 : ['default value'],
    ...
     })
   }
}