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

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

0 голосов
/ 13 июня 2018

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

<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-контент и, возможно, динамический компонент.
Каков наилучший способ сделать это простым способом?

Ответы [ 2 ]

0 голосов
/ 19 июня 2018

Я бы предложил создать компонент для каждой подформы, а затем *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 s.Если нет, создайте поле в вашем классе контроллера и удерживайте там выбранный тип. 

// component.ts

public type: number | null = null;

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

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

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

0 голосов
/ 13 июня 2018

Чтобы добавить параметры динамически, угловое обеспечение (*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);
}
...