Question

使用适用于Android或桌面的Firefox（版本54和55）并将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。https://msdn.microsoft.com/en-us/library/ff519602(v=office.11).aspx。因此，表单控件的值不会更新并保持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);
    }

<input type =“date”/>无法验证Firefox for Android中的值何时更改

1 个答案: