zoukankan      html  css  js  c++  java
  • [ngx-formly] Using field hooks to listening value changes

    Every serious form in large apps has some dependent fields. For instance a dropdown field containing all nations and another dropdown field displaying the cities based on the currently selected nation. In this less we're looking into how we can dynamically load and filer our city dropdown based on the changes on our nation dropdown field.

    import { Component } from '@angular/core';
    import { FormGroup } from '@angular/forms';
    import { FormlyFieldConfig } from '@ngx-formly/core';
    import { DataService } from './core/data.service';
    import { switchMap, startWith } from 'rxjs/operators';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss'],
    })
    export class AppComponent {
      form: FormGroup = new FormGroup({});
      model = {
        firstname: 'Zhentian',
        age: 31,
        nationId: 2,
        cityId: 1,
      };
      fields: FormlyFieldConfig[] = [
        {
          key: 'firstname',
          type: 'input',
          templateOptions: {
            type: 'text',
            label: 'FirstName',
          },
        },
        {
          key: 'age',
          type: 'input',
          templateOptions: {
            type: 'number',
            label: 'Age',
          },
        },
        {
          key: 'nationId',
          type: 'select',
          templateOptions: {
            label: 'Nation',
            options: this.dataService.getNations(),
          },
        },
        {
          key: 'cityId',
          type: 'select',
          templateOptions: {
            label: 'Cities',
            options: [],
          },
          hooks: {
            onInit: (field: FormlyFieldConfig) => {
              field.templateOptions.options = field.form.get('nationId').valueChanges.pipe(
                startWith(this.model.nationId),
                switchMap(nationId => this.dataService.getCities(nationId)),
              );
            },
          },
        },
      ];
    
      constructor(private dataService: DataService) {}
    
      onSubmit({ value, valid }) {
        console.log(value, valid);
      }
    }
  • 相关阅读:
    luogu 2742 二维凸包
    poj2398 Toy Storage 计算几何,叉积,二分
    luoguP1742 最小圆覆盖
    bzoj4501 旅行
    cf1173 D. Nauuo and Circle
    bzoj3745: [Coci2015]Norma 分治,单调队列
    bzoj1176: [Balkan2007]Mokia cdq
    luoguP3964 [TJOI2013]松鼠聚会
    浅谈数学期望
    tarjan模板(带注释)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12172036.html
Copyright © 2011-2022 走看看