Angular7: различия в проверке формы - PullRequest
Новая
       14

Angular7: различия в проверке формы

0 голосов
/ 09 мая 2019

При проверке достоверности элемента управления у меня возникают проблемы.Когда я регистрирую полный объект , свойство valid имеет значение true, а при регистрации только свойства valid оно выдает false.Зачем?А как правильно проверить правильность конкретной формы 'control'?

Вот код в моем файле src / app / Customers / customer-edit / customer-edit.component.ts: 

  onDocPicked(event: Event, type: string) {
    const file = (event.target as HTMLInputElement).files[0];
    this.customerForm.get('docs').patchValue({
      [type]: file
    });
    this.customerForm.get('docs').get(type).updateValueAndValidity();
    this.customerForm.get('docs').get(type).markAsDirty();
    console.log(this.customerForm.get('docs').get(type)); // <---- HERE THE VALID PROPERTY IS TRUE (when uploading a pdf / image -- Or false when updading any other file)
    console.log(this.customerForm.get('docs').get(type).valid); // <--- AND THERE FALSE (no matter the type of file being uploaded)
  }

Файл "выбран" вначале проверяется mimeValidator принимающими изображения и pdf: 

import { AbstractControl } from '@angular/forms';
import { Observable, Observer, of } from 'rxjs';

export const mimeType = (
  control: AbstractControl
): Promise<{ [key: string]: any }> | Observable<{ [key: string]: any }> => {
  if (!control.value || typeof(control.value) === 'string') {  return of(null); }
  const file = control.value as File;
  const fileReader = new FileReader();
  const frObs = Observable.create(
    (observer: Observer<{ [key: string]: any }>) => {
      fileReader.addEventListener('loadend', () => {
        const arr = new Uint8Array(fileReader.result as ArrayBuffer ).subarray(0, 4);
        let header = '';
        let isValid = false;
        for (let i = 0; i < arr.length; i++) {
          header += arr[i].toString(16);
        }
        switch (header) {
          case '89504e47':
            isValid = true;
            break;
          case 'ffd8ffe0':
          case 'ffd8ffe1':
          case 'ffd8ffe2':
          case 'ffd8ffe3':
          case 'ffd8ffe8':
            isValid = true;
            break;
          case '25504446':
            isValid = true;
            break;
          default:
            isValid = false; // Or you can use the blob.type as fallback
            break;
        }
        if (isValid) {
          observer.next(null);
        } else {
          observer.next({ invalidMimeType: true });
        }
        observer.complete();
      });
      fileReader.readAsArrayBuffer(file);
    }
  );
  return frObs;
};

Вот мой стековый блик для моего проекта: https://stackblitz.com/github/ardzii/test

1 Ответ

1 голос
/ 09 мая 2019

Так почему журналы консоли отличаются? Мы можем начать с того, что угловые формы на самом деле асинхронны, так что это часть ответа. Во-вторых, мы должны знать, как работает консольный журнал. Как указано здесь :

состояние объектов извлекается при развертывании объекта вручную в консоли, а не во время ведения журнала.

Итак, состояние valid уже установлено. Поскольку формы асинхронные, иногда нам требуется небольшой тайм-аут, чтобы получить наиболее свежее значение, поэтому делаем это: 

setTimeout(() => {
  console.log(this.customerForm.get('docs').get(type).valid);
},100);

напечатает true

DEMO

...