ngx-formly更新模型未影响自定义组件

时间:2018-03-07 12:24:45

标签: javascript angular typescript angular-cli angular-formly

我使用custorm组件字段。

一切正常,直到我尝试用另一个模型替换模型。

每个字段的组件未使用新值更新。

没有任何事件开启

我尝试更改为模特的方式:

this.model = this.data.model[this.currentRow];

html formly标记

  <form class="formly" role="form" [formGroup]="form" >

    <formly-form #formly [(model)]="model" [fields]="fields" [form]="form" [options]="options">

    </formly-form>

  </form>

</div>

app.model.ts

FormlyModule.forRoot({
      types: [
        { name: 'customTextNumeric', component: VerticalNumericEditorComponent},        
        { name: 'customDatepicker', component: VerticalDatePickerComponent },
        { name: 'customSelect', component: VerticalSelectComponent },
.

我的自定义组件(仅供参考)

 import { Component, OnInit, Input, ViewChild, SimpleChanges } from '@angular/core';

import { FieldType } from '@ngx-formly/core';
import { FormControl, FormGroupDirective, NgForm, Validators } from '@angular/forms';
import { ErrorStateMatcher } from '@angular/material/core';
import { SearchLabelService } from '../../tableHandle/search-label.service';

/** Error when invalid control is dirty, touched, or submitted. */

export class MyErrorStateMatcher implements ErrorStateMatcher {

  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
        const isSubmitted = form && form.submitted;
        return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
      }
    }

@Component({
      selector: 'app-vertical-numeric-editor',
      templateUrl: './vertical-numeric-editor.component.html',
      styleUrls: ['./vertical-numeric-editor.component.css']
    })

export class VerticalNumericEditorComponent extends FieldType {

  private validates = [];
      private initialValue;
      private value;



  private validateValues = { required: false, minLen: 0, maxLen: 99999999, pattern: '' };

  constructor(private labelSearch: SearchLabelService) {
        super();
        this.numericFormControl = new FormControl('', this.validates);
        console.log('constructor field:');
      }

  numericFormControl: FormControl;

  onInit() {
        console.log('oninit');
      }

  matcher = new MyErrorStateMatcher();

  ngOnInit() {
      }


  OnChanges(e) {
        console.log('on changes');
      }



  ngDoCheck() {
      }

  ngOnDestroy() {
      }

  get type() {
        return this.to.type || 'text';
      }
    }

有人知道如何使用新值

更新组件

1 个答案:

答案 0 :(得分:0)

在github中检查此问题: https://github.com/formly-js/ngx-formly/issues/975

看来这取决于您更新模型的方式(无论是否只是更新模型的一个字段)