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);
      }
    }
  • 相关阅读:
    LeetCode "Super Ugly Number" !
    LeetCode "Count of Smaller Number After Self"
    LeetCode "Binary Tree Vertical Order"
    LeetCode "Sparse Matrix Multiplication"
    LeetCode "Minimum Height Tree" !!
    HackerRank "The Indian Job"
    HackerRank "Poisonous Plants"
    HackerRank "Kundu and Tree" !!
    LeetCode "Best Time to Buy and Sell Stock with Cooldown" !
    HackerRank "AND xor OR"
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12172036.html
Copyright © 2011-2022 走看看