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

Question

我正在进行一个项目，我将添加一张收据，该收据将在用户提交表单后显示。没有有效的方法来测试该表格，因为我每次都必须填写表格以确认问题和答案是否进入收据。

我想创建一个临时的单一方法 autoFill() ，该方法与 anchor 元素绑定(bind)，以便自动用答案填充表单。在 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

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

<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'],
    ...
     })
   }
}