Поле ввода пользовательской формы, похожее на угловой материал - PullRequest
Новая
       27

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

0 голосов
/ 11 марта 2019

Я хотел бы создать общую пользовательскую форму ввода для использования внутри угловых реактивных форм. Моей целью было бы добиться того же поведения, что и в форме углового материала. Входные данные о всплывающей подсказке.

Я создал компонент, который благодаря transclusion станет родителем / оболочкой для простого поля ввода. В настоящий момент метка всплывающей подсказки отображается над полем ввода, когда пользователь начинает вводить какой-то текст, но я бы хотел, чтобы он был в фокусе. Проблема в том, что я не могу найти способ сосредоточиться на внутреннем ребенке.

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

шаблон 

<div class="form-element" #inputContainer>
  <ng-content></ng-content>
  <label *ngIf="label" [ngClass]="{'label-show': showLabel}">{{label}}</label>
</div>

компонент 

export class FormContainerComponent implements AfterViewInit {

  showLabel = true;
  isError = false;

  @Input()
  label: string;

  @ViewChild('inputContainer')
  el: ElementRef;

  @HostListener('focus', ['$event.target'])
  onFocus(target) {
    // This does not work
  }

ngAfterViewInit() {
  const input = this.el.nativeElement.childNodes[0] as HTMLInputElement;

  // Code below temporary, the goal would be trigger on input field focus
  setTimeout(() => {
    this.showLabel = !!input.value;
  });

   const x = fromEvent(input, 'keyup')
     .pipe(map((e: any) => e.target.value))
     .subscribe(value => (this.showLabel = !!value));
 }
}

И компонент будет использоваться так: 

<form-container [label]="'Street'">
      <!-- This is the input that onFocus should trigger the label -->
      <input type="text" formControlName="street" placeholder="street" [ngClass]="{ 'error': ctrls.strasse.errors && (ctrls.strasse.touched || submitted) }">

       <!-- I would like to avoid having to repeat thos error messages for each input form and embed in the component -->
      <span class="error-label" *ngIf="hasError('street', 'required')">
      </span> 
    </myh-form-container>
...