<input type="date"> 在 Firefox for Android 中的值更改时不进行验证

Question

在将 Firefox（版本 54 和 55）用于 Android 或桌面并将 dom.forms.datetime 标志设置为 true 时。它打开一个日历模式，供用户选择日期。但是当用户选择日期时，验证不会更新并且提交按钮继续禁用。

my.component.html：

<input id="deadline" 
       type="date" 
       class="form-control"
       name="deadline" 
       placeholder="yyyy-mm-dd" 
       formControlName="deadline">

<button type="submit" class="btn btn-primary" [disabled]="!newForm.valid">
      save
</button>

my.component.ts：

ngOnInit() {
    this.newForm = new FormGroup({
        deadline: new FormControl('', Validators.compose([
            Validators.required,
            Validators.pattern('[0-9]{4}-[0-9]{2}-[0-9]{2}')
        ]))
    });
}

我怎样才能做到这一点？

Answer 1

发生这种情况是因为 Firefox for Android 仅在用户从日期选择器中选择日期后触发更改但不触发输入事件。 DefaultValueAccessor in Angular relies on the input event。结果，表单控件的值不会更新，而是保持null。

作为一种解决方法，您可以添加一个调用 FormControl 的 setValue() 的 onchange 侦听器。

my.component.ts：

    @ViewChild('input')
    private input: ElementRef;

    @HostListener('change')
    private missingInputWorkaround() {
        const formCtrl = this.newForm.get('deadline');
        if (this.isBrowserWithoutInputEvent() && this.input.nativeElement.value !== formCtrl.value) {
            formCtrl.setValue(this.input.nativeElement.value);
        }
    }

    private isBrowserWithoutInputEvent() {
        // Firefox for Android (Fennec)
        return /\(Android .+ Firefox\/\d+/i.test(navigator.userAgent);
    }