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

Question

我正在尝试根据 Angular 表单有效状态禁用按钮。我正在使用带有 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'))
}