Question

我认为我对角度处理表单有一个非常普遍的问题，但是经过数小时的阅读和阅读，找不到任何答案。

问题：
我建立了一个反应形式，如果用户处于角度范围内（键入值等），那一切都很好。但是，当我使用Web Developer Form Filler 之类的Chrome插件并填写表单时，模型不会更新。

为重现此问题，我在这里创建了一个小应用程序：https://stackblitz.com/edit/angular-ltrmpd。

表单控制器：

SSLContext sslContext = new SSLContextBuilder()
    .loadTrustMaterial(null, ((certificate, authType) -> true)).build();
CloseableHttpClient client = HttpClients.custom().setSSLContext(sslContext)
    .setSSLHostnameVerifier(new NoopHostnameVerifier()).build();

表单视图：

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  form = new FormGroup({
    name: new FormControl('Valid name', [
      Validators.required,
      Validators.minLength(5)
    ])
  });

  get name() { return this.form.get('name'); }

  onSubmit() {
    // reload all form data and revalidate, but how?

    if (this.form.valid) {
      alert('VALID');
    }
  }
}

默认表单值有效
单击“从外部设置值”按钮->模型不会更新
单击“提交”->您应该无法单击该按钮，否则我们将在单击该按钮之后手动更新模型和验证状态

我尝试过的最简单的解决方案是在用户提交表单后更新模型并重新验证。但是，如何使用当前表单值更新模型？

我仅发现以下问题：How to update Angular 2 Reactive form field when changes occurred outside of Angular world。但是我认为这不是同一个问题，因为我对此表单填充工具没有任何控制权。

Answer 1

我一直在寻找相同的事件，最后在@angular/core包下研究了反应性表单实现，然后有一个input事件绑定到form元素，该事件负责运行附加到该表单的验证程序元素并更新FormControlName。

因此，要解决您的问题，您可以在同一窗体控件上调度输入事件。

示例-

var event = new Event("input");
element.dispatchEvent(event);

如果您需要有关反应式表单实施的更多信息，则可以在下面查找。

注意-default_value_accessor.ts文件的引荐行下方。

第68行–我们已将输入事件绑定到host元素，该元素最终调用_handleInput

host:      {
'(input)': '$any(this)._handleInput($event.target.value)',
'(blur)': 'onTouched()',
'(compositionstart)': '$any(this)._compositionStart()',
'(compositionend)': '$any(this)._compositionEnd($event.target.value)'
},

第134行–我们定义了_handleInput，该定义正在运行onChange回调，该回调负责从validator.ts运行_executeValidators函数。

/**@internal*/
_handleInput(value: any): void {
   if (!this._compositionMode || (this._compositionMode && !this._composing)) {
      this.onChange(value);
    }
}

使用外部值更新角反应形式模型

1 个答案: