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);
      }
    }
  • 相关阅读:
    jenkins配置发送邮件
    inux下rz、sz的简单安装
    Linux系统信息查看命令
    selenium元素定位
    windows下 maven+selenium+testng项目搭建(七)
    eclipse testng插件安装
    window maven安装(六)
    linux下Apache+Svn环境搭建(五)
    Linux实战教学笔记38:企业级Nginx Web服务优化实战(下)
    Linux实战教学笔记37:企业级Nginx Web服务优化实战(上)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12172036.html
Copyright © 2011-2022 走看看