Angular2: проверка для не будет срабатывать при изменении файла для загрузки

Угловое 2, похоже, имеет проблемы с проверкой выполнения при изменении ввода файла.

Я сделал иллюстрацию для иллюстрации этой проблемы:

Я делаю formGroup как

this.frm = new FormGroup({ file: new FormControl("", this.validateFile) }); 

И в функции validateFile я бросаю предупреждение и записываю на консоль:

 public validateFile(formControl: FormControl): {[key: string]: any; } { alert('Validation ran'); console.log('Validation ran'); } 

Plunkr, чтобы проиллюстрировать проблему: https://plnkr.co/edit/Pgcg4IkejgaH5YgbY3Ar?p=preview

Проверка будет выполняться при инициализации страницы, но не будет выполняться каждый раз при изменении загружаемого файла.

Есть ли решение этой проблемы?

Я исправил его, используя кемский ответ и комментарий Себастьяна. Я сделал ngValueAccessor, который регистрируется на каждом входе с файлом типа.

Plunkr можно найти здесь .

Наиболее подходящий код + пояснение ниже:

Это добавляет ControlValueAccessor для входов файлов, которые когда-нибудь могут быть частью самого углового фрейма ( # 7341 ). Вход файла работает иначе, чем другие элементы управления. Этот fragment кода гарантирует, что выбранные файлы считаются значением:

 import {Directive} from "@angular/core"; import {NG_VALUE_ACCESSOR, ControlValueAccessor} from "@angular/forms"; @Directive({ selector: "input[type=file]", host : { "(change)" : "onChange($event.target.files)", "(blur)": "onTouched()" }, providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: FileValueAccessor, multi: true } ] }) export class FileValueAccessor implements ControlValueAccessor { value: any; onChange = (_) => {}; onTouched = () => {}; writeValue(value) {} registerOnChange(fn: any) { this.onChange = fn; } registerOnTouched(fn: any) { this.onTouched = fn; } } 

И для «обязательной» проверки я сделал валидатор, который я использую, добавив статический метод проверки в файл FormControl для ReactiveForms. (или в качестве директивы для форм, управляемых шаблонами).

 import {Directive} from "@angular/core"; import {NG_VALIDATORS, Validator, FormControl} from "@angular/forms"; @Directive({ selector: "[requiredFile]", providers: [ { provide: NG_VALIDATORS, useExisting: FileValidator, multi: true }, ] }) export class FileValidator implements Validator { static validate(c: FormControl): {[key: string]: any} { return c.value == null || c.value.length == 0 ? { "required" : true} : null; } validate(c: FormControl): {[key: string]: any} { return FileValidator.validate(c); } } 

Построение моей формы выглядит так:

 private buildForm() { this.frm = new FormGroup({ file: new FormControl("", [FileValidator.validate]) }); } 

И для html:

  

Угловая 4+ изменила там хосты.

 import { Directive, HostListener } from "@angular/core"; import { NG_VALUE_ACCESSOR, ControlValueAccessor } from "@angular/forms"; @Directive({ selector: "input[type=file]", providers: [ {provide: NG_VALUE_ACCESSOR, useExisting: FileValueAccessorDirective, multi: true} ] }) export class FileValueAccessorDirective implements ControlValueAccessor { @HostListener('change', ['$event.target.files']) onChange = (_) => {}; @HostListener('blur') onTouched = () => {}; writeValue(value) {} registerOnChange(fn: any) { this.onChange = fn; } registerOnTouched(fn: any) { this.onTouched = fn; } } 

Ввод с типом file в настоящее время не поддерживается, см. # 7341

  • Выбрать на основе enums в Angular2
  • Как загрузить файл в Angular2
  • Interesting Posts

    Как слить 2 json-файл с помощью jq?

    Отключить научную нотацию в Excel

    Почему разрешена частичная специализация шаблона вложенного шаблона, а полная – нет?

    Как перезагрузить компьютеры в локальной сети, зная только внешний IP-адрес?

    override jquery проверка правильности адреса электронной почты для плагина

    Тип математических формул в Microsoft Word в стиле LaTeX?

    Нет двойной опции загрузки для Windows на моей машине

    Как войти в режим копирования на прокрутке мыши в tmux?

    Где найти текущие стандартные документы C или C ++?

    Автоматическое подключение к Интернету по умолчанию при запуске Windows

    Получение IP-адреса клиента: REMOTE_ADDR, HTTP_X_FORWARDED_FOR, что еще может быть полезно?

    Как объявить и использовать логические переменные в сценарии оболочки?

    Не удалось выполнить dex: превышение верхнего предела GC в Eclipse

    Динамически создавать столбцы для кросс-таблицы в PostgreSQL

    C # – Невозможно неявно преобразовать тип List to List

    Давайте будем гением компьютера.