Angular - построение формы на основе пользовательского ввода

Question

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

<mat-form-field>
     <mat-select placeholder="Type" [(ngModel)]="row.Type" (change)="TypeChosen(row.Type, row)">
         <mat-option [value]="0">Treatment</mat-option>
         <mat-option [value]="1">Travel</mat-option>
         <mat-option [value]="2">Medication</mat-option>
         <mat-option [value]="3">Equipment</mat-option>
     </mat-select>
</mat-form-field>

Если он выбирает тип "Обработка", он получает другой вход выбора с некоторыми опциями с несколькими другими входами, и если он выбирает другой тип, он получает другие опции и другие входные данные.

Я понимаю, что мне нужно динамически генерировать HTML-контент и, возможно, динамический компонент.
Каков наилучший способ сделать это простым способом?

Answer 1

Я бы предложил создать компонент для каждой подформы, а затем *ngIf их на основе выбранной опции, вот так:

<!-- component.html -->

<mat-form-field>
  <mat-select placeholder="Type" [(ngModel)]="row.Type" (change)="onTypeChosen(row.Type, row)">
    <mat-option [value]="0">Treatment</mat-option>
    <mat-option [value]="1">Travel</mat-option>
    <mat-option [value]="2">Medication</mat-option>
    <mat-option [value]="3">Equipment</mat-option>
  </mat-select>
</mat-form-field>

<my-treatment-component *ngIf="type === 0" [someInput]="'some value'"></my-treatment-component>
<my-travel-component *ngIf="type === 1" [somethingElse]="true"></my-travel-component>
<my-medication-component *ngIf="type === 2" (someOutput)="onMedicationOutput($event)"></my-medication-component>
<my-equipment-component *ngIf="type === 3"></my-equipment-component>

Если у вас уже есть что-то, удерживающее ваш выбор типа, вы можете связать это с *ngIfвместо. Если нет, создайте поле в вашем классе контроллера и удерживайте там выбранный тип.

// component.ts

public type: number | null = null;

public onTypeChosen(type: number, row): void {
  this.type = type;
}

Если в ваших подформах есть части, которые можно использовать повторно (или они в основном одинаковы, без конфигурации), как правило, рекомендуется извлекать повторно используемый код в отдельные компоненты и составлять их вместе.

Надеюсь, это немного поможет:-)

Answer 2

Чтобы добавить параметры динамически, угловые обеспечивают (*ngFor).

<mat-form-field>
     <mat-select placeholder="Type" [(ngModel)]="row.Type" (change)="TypeChosen(row.Type, row)" *ngFor="let option of options; let i = index">
         <mat-option (click)="updateOptions(option)" [value]="{{i}}">option.text</mat-option>
     </mat-select>
</mat-form-field> 

---

в вашем контроллере.ts

private options = [];

private initOptions(){
this.options = [
{text:'Treatment' , possibleOptionsRelates:[text:'possible1']},
{text:'Travel' , possibleOptionsRelates:[text:'possible12']},
{text:'Medication' , possibleOptionsRelates:[text:'possible13']}];
}
private updateOptions(option){
     this.options.push(...option.possibleOptionsRelates);
}