Question

我想创建一个通用的自定义输入表单，以在Angular反应表单中使用。我的目标是获得与有关标签工具提示的Angular材质表单输入完全相同的行为。

我创建了一个组件，该组件通过包含将成为简单输入字段的父/包装。现在，当用户开始输入一些文本时，工具提示标签将显示在输入字段上方，但我希望将其放在焦点上。问题是我找不到一种方法将焦点放在内部孩子身上。

此外，我想在父组件中显示表单错误消息，因此不必每次在表单中使用输入字段时都重复这些错误消息。在这种情况下，我是否应该创建一个自定义错误消息组件，以接收输入表单作为输入并显示错误消息（如果有）？

模板

public class MyCalledClass{
    public static void loadResource() {
        new File(MyCalledClass.class.getResource("file.txt").getPath()); // Will retrieve the file called "file.txt"
                                                                         // in the project where this class is

        new File("file.txt");  // Will retrieve the file called "file.txt" in the project calling this method
    }
}

组件

<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));
 }
}

自定义表单输入字段类似于角形材料

0 个答案: