Многоразовые входные компоненты с использованием Angular 9 и конструкцией материала - PullRequest
Новая
       34

Многоразовые входные компоненты с использованием Angular 9 и конструкцией материала

0 голосов
/ 17 апреля 2020

Я пытаюсь создать повторно используемый компонент ввода, используя angular 9 и дизайн материала. Нечто похожее на диаграмму ниже.

enter image description here

TextboxComponent. html

<mat-form-field appearance="fill">
    <mat-label>Input</mat-label>
    <input matInput formControlName = {{imeta.formControlName}}>
</mat-form-field>

TextboxComponent.ts 

@Component({
   selector: 'app-textbox',
   templateUrl: './textbox.component.html',
   styleUrls: ['./textbox.component.scss']
  })
export class TextboxComponent implements OnInit {
  @Input()imeta : IMeta
  constructor() { }
  ngOnInit(): void {}
}

export class IMeta {
    component: ComponentType;
    formControlName : string = null;
}

export enum ComponentType {
    TextBox = 0,
    TextArea = 1,
    RadioButton = 2,
    Checkbox = 3,
    Select = 4
}

Это настраиваемый компонент, который действует как мост.

реактивный-base-input.component. html

<ng-container [ngSwitch]="imeta.component">
    <ng-template [ngSwitchCase]="componentType.TextBox">
        <app-textbox [imeta]="imeta"></app-textbox>
    </ng-template>
</ng-container>

@Component({
  selector: 'reactive-inputs',
  templateUrl: './reactive-base-inputs.component.html',
  styleUrls: ['./reactive-base-inputs.component.scss']
})
export class ReactiveBaseInputsComponent implements OnInit {
  @Input() imeta : IMeta;
  componentType = ComponentType
  constructor() { }

  ngOnInit(): void {}
}

Это то место, где я потребляю свой компонент ввода. 

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <reactive-inputs [imeta]="configuration"></reactive-inputs>
</form>

Я сталкиваюсь с проблемой с помощью getControlName get и set, и я не понимаю, как я могу установить formControlName и доступ к элементу управления из родительского компонента.

...