Dynami c реактивные формы с пользовательским вводом в angular 6

Question

Как добавить поля формы на основе пользователя формы ввода (выпадающий выбор), который может иметь ввод, кнопку, флажок и т. Д. c в angular реактивных формах.

Answer 1

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

см. Следующий пример. https://angular-vfeusd.stackblitz.io

app.component.ts

import { Component } from '@angular/core';
import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  form: FormGroup;
  newFieldName: string;
  controlNames: string[] = [];
  pageMessage = "";

  constructor(private fb:FormBuilder){
    this.form = fb.group({})
  }

  addToForm(event){
    console.log(this.newFieldName);
    const ctrl = new FormControl();
    ctrl.validator = Validators.required;
    ctrl.setValue(null);
    this.form.addControl(this.newFieldName, ctrl)
    this.controlNames.push(this.newFieldName);
    this.newFieldName = '';
  }
  submitForm(){
    if(!this.form.valid){
          this.pageMessage = "invalid form"
    }    
    this.pageMessage = '';
    console.log(this.form.value)
  }
}


app.component.ts

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>

Enter input name:  
<input type="text" name="formfieldname" [(ngModel)]="newFieldName">
<button type="button" name="enterButton" (click)="addToForm($event)">Enter</button>
<hr>
{{pageMessage}}
<form [formGroup]="form">
  <table>
  <tr *ngFor="let c of controlNames; let x=index">

    <td>{{c}}</td>
    <td><input type="text" name="{{c}}" 
        value="" placeholder="enter value" [formControlName]="c">   
        </td>
  </tr>
  </table>
  <button type="button" name="formsubmit" (click)="submitForm()">Submit Form</button>
</form>

Answer 2

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