Пользовательские элементы управления с реактивными формами

Я использую Angular 7, элементы управления Angular Material с реактивными формами.

Я создал пользовательский текст (matInput type = "text"), число (matInput type = "number"), элементы управления select (matSelect) с помощью Angular Material с mat-form-field

Вот stackblitz для моего примера.

Я пытаюсь прикрепить элементы управления настраиваемой формы к реактивной форме и пытаюсь автоматически запускать любые проверки в группе форм.

Я использую ControlValueAccessor для этого, однако мой Select не идентифицируется как элемент управления формой, и в элементе управления формы в форме не записывается никакое значение.

Любая помощь в этом отношении приветствуется.


angular angular-material angular7 angular-reactive-forms reactive-forms
person Immortal    schedule 04.07.2019    source источник
comment
Используйте: stackoverflow.com/questions/39661430/   -  person Prashant Pimpale    schedule 04.07.2019
comment
просто используйте (selectionChange)="onChange($event.value)"   -  person Eliseo    schedule 04.07.2019

Ответы (1)


arrow_upward
2
arrow_downward

ОБНОВЛЕНИЕ Jenson-button-event найдите лучший вариант, см. ТАК ответьте

Заглянув в ваш код, я вижу, что вы используете Angular Material для создания своего настраиваемого FormControl. Что ж, проблема при использовании материала Angular заключается в том, как сделать так, чтобы "ошибки" появлялись.

Когда мы используем <mat-error>, ошибка появляется, если элемент управления недействителен. Учтите, что недействительна наша настраиваемая форма управления, а НЕ входной материал. Как избежать этого неудобства?

Решение использует CustomFieldErrorMatcher. если мы можем создать CustomFiledErrorMatcher, который учитывает ошибки нашего customFormControl, мы можем сделать что-то вроде

class CustomFieldErrorMatcher implements ErrorStateMatcher {
  constructor(private customControl: FormControl) { }
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    return control.dirty && this.customControl.invalid;
  }
}

Ну это только в ngAfterView напишите что-нибудь вроде

  ngAfterViewInit(): void {
    const ngControl: NgControl = this.injector.get(NgControl, null);
    if (ngControl) {
      setTimeout(() => {
        this.control = ngControl.control as FormControl;
      })
    }
  }

Имеет функцию

errorMatcher() {
    return new CustomFieldErrorMatcher(this.control)
  }

И создайте наш custom-formControl.html, например

<mat-form-field>
    <mat-select [ngModel]="value" (ngModelChange)="value=$event;onChange($event)" 
          [placeholder]="placeholder" [disabled]="disabled"
          [errorStateMatcher]="errorMatcher()">
        <mat-option *ngFor="let option of optionList" [value]="option.value">
            {{ option.label }}
        </mat-option>
    </mat-select>
  <mat-error *ngIf="control?.hasError('required')">Required</mat-error>
  <mat-error *ngIf="control?.hasError('error')">{{control?.errors.error}}</mat-error>
</mat-form-field>

В stackblitz вы можете увидеть две формы, одну которые используют customFormControl, а другой - в классическом режиме

person Eliseo    schedule 04.07.2019