Angular Form 对于浏览器自动填充无效

Question

我正在尝试根据角度中的表单有效状态禁用按钮。我正在使用带有 Validators.required 的反应式表单。我正在使用这个条件[disabled]=!form.valid。如果用户填写数据，它就可以正常工作。但是，当浏览器（chrome）自动填充数据时，表单状态仍然保持不变。 注意：我研究了这个问题，但没有找到合适的解决方案以及为什么会发生这种情况。请不要与此问题重复此问题Angular Form invalid on browser autofill 有没有办法解决此问题。

Answer 1

尝试下面的代码。这个想法是检查您的输入是否具有浏览器填充的值，并使用表单 API 应用它（或者只是调度“输入”事件）。但该值并不是立即可用，这就是为什么我们需要 0 延迟的 setTimeout

@ViewChild('input', {read: ElementRef}) inputRef: ElementRef<HtmlInputElement>


ngOnInit(){
    window.setTimeout(() => this.setValueFromBrowserAutofill())
}

private setValueFromBrowserAutofill(){
    //nativeElement represents DOM element
    const browserValue = this.inputRef?.nativeElement.value; 

    //set value using forms API so Angular will know about it
    this.form.get('inputControl').setValue(browserValue)
}

更新：替代方式

private setValueFromBrowserAutofill(){
    this.inputRef?.nativeElement.dispatchEvent(new Event('input'))
}