Динамическое добавление полей с помощью Formly - PullRequest
Новая
       12

Динамическое добавление полей с помощью Formly

0 голосов
/ 05 июля 2018

Я пытаюсь установить поля формы динамически во время выполнения, используя ngx-formly :

app.component.html 

<form [formGroup]="form" (ngSubmit)="submit(model)">
    <formly-form [form]="form" [fields]="fields" [model]="model">
      <button type="submit" class="btn btn-default">Submit</button>
    </formly-form>
  </form>


 <button (click)="setFields()">Click Me To Dynamically Add Fields</button>

app.component.ts 

import { Component } from '@angular/core';
import {FormGroup} from '@angular/forms';
import {FormlyFieldConfig} from '@ngx-formly/core';
import { ChangeDetectorRef } from '@angular/core';
import { ApplicationRef } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title: string;
  form = new FormGroup({});
  model = { email: 'email@gmail.com' };
  fields: FormlyFieldConfig[] = [];

  constructor(private appRef: ApplicationRef) {
  }
  setFields() {
    this.fields.push({
      key: 'email',
      type: 'input',
      templateOptions: {
        type: 'email',
        label: 'Email address',
        placeholder: 'Enter email',
        required: true,
      }
    });
    //this.form.reset();
    this.appRef.tick();
  }
  submit(model) {
    console.log(model);

  }
}

Кажется, что поле добавляется динамически. Однако «требуемый» валидатор не работает. Я что-то упускаю?

Ошибка в браузере: 

ERROR TypeError: Unable to get property 'showError' of undefined or null reference

Это вообще возможно?

...