Typing in input fields is slow and displays text after some seconds delay

[Babasaheb T]

Hi,

I have angular 5 form with nested form array. The issue is when I type into the input text box there is some seconds delay to display the text in the input textbox. Please find the below form I use in the component.

this.formBuilder.group({

      customer: this.initCustomer(),

      shipper: this.formBuilder.array([

        this.initShipper()

      ]),

      consignee: this.formBuilder.array([

        this.initConsignee()

      ]),

      driverEquipment: this.formBuilder.array([

        this.initLoadDriverEquipment()

      ]),

      freightDetails: this.formBuilder.array([

        this.initFreight()

      ]),

      revenue: this.formBuilder.array([

        this.initRevenue()

      ]),

      totalRevenue: [{ value: '', disabled: true }],

      loadCoreId: [null],

      loadNumber: [null],

      totalLoadedMiles: [{ value: '', disabled: true }],

      deaheadMiles: [{ value: '', disabled: true }],

      consigneeOdometerReading: [''],

      loadType: new FormControl('', Validators.required),

      loadStatus: new FormControl('Available', Validators.required),

    });

========================================================================================================

initCustomer() {

    return this.formBuilder.group({

      id: [],

      name: ['', [Validators.pattern(RegexPattern.ONLY_CHARACTER_SPECIAL_CHARCTER_PATTERN)]],

      address1: [null],

      address2: [null],

      city: [null, [Validators.required, Validators.pattern(RegexPattern.ONLY_CHARACTER_SPACE_PATTERN)]],

      state: [null, [Validators.required, Validators.pattern(RegexPattern.ONLY_CHARACTER_SPACE_PATTERN)]],

      zipcode: [null, [Validators.required, Validators.pattern(RegexPattern.ZIP_CODE_VALIDATION)]],

      contacts: this.formBuilder.array([

        this.initContact()

      ]),

      customerLocationId: [null],

      latitude: [0],

      longitude: [0]

    })

  }

  

  ========================================================================================================

  

  initShipper() {

    return this.formBuilder.group({

      id: [],

      loadShipperId: [0],

      name: ['', [Validators.pattern(RegexPattern.ONLY_CHARACTER_SPECIAL_CHARCTER_PATTERN)]],

      address1: [''],

      address2: [''],

      city: ['', [Validators.required, Validators.pattern(RegexPattern.ONLY_CHARACTER_SPACE_PATTERN)]],

      state: ['', [Validators.required, Validators.pattern(RegexPattern.ONLY_CHARACTER_SPACE_PATTERN)]],

      zipcode: ['', [Validators.required, Validators.pattern(RegexPattern.ZIP_CODE_VALIDATION)]],

      pickupDateTime: ['', [Validators.required]],

      pickupTime: [''],

      pickupTimeFormat: ['AM'],

      pickupEndDateTime: [''],

      pickupEndTime: [''],

      pickupEndTimeFormat: ['AM'],

      mindate: [new Date()],

      maxdate: [new Date()],

      actualPickupDateTime: [''],

      actualPickupTime: [''],

      actualPickupTimeFormat: ["AM"],

      actualPickupEndDateTime: [''],

      actualPickEndTime: [''],

      actualEndTimeFormat: ["AM"],

      actualmindate: [new Date()],

      actualmaxdate: [new Date()],

      ispickuptimerange: [false],

      isactualpickuptimerange: [false],

      latitude: [0],

      longitude: [0],

      isDeleted: [false],

      shipperLocationId: [null],

      contacts: this.formBuilder.array([

        this.initContact()

      ]),

      contactList: this.formBuilder.array([]), //set each shipper/consignee contact list separatally

      displayContactList: this.formBuilder.array([])

    })

  }

  

  ========================================================================================================

  

   initContact() {

    return this.formBuilder.group({

      id: [],

      name: [null, [Validators.pattern(RegexPattern.ONLY_CHARACTER_SPECIAL_CHARCTER_PATTERN)]],

      phone: [null, [Validators.pattern(RegexPattern.ONLY_INTEGER_VALUE_PATTERN)]],

      fax: [null, [Validators.pattern(RegexPattern.ONLY_INTEGER_VALUE_PATTERN)]],

      emailAddress: [null, [Validators.pattern(RegexPattern.EMAIL_REGEX_PATTERN)]],

      isSelectedContact: [false]

    });

  }

  

  ========================================================================================================

  

  initConsignee() {

    return this.formBuilder.group({

      id: [],

      loadConsigneeId: [0],

      name: ['', [Validators.required, Validators.pattern(RegexPattern.ONLY_CHARACTER_SPECIAL_CHARCTER_PATTERN)]],

      address1: [''],

      address2: [''],

      city: ['', [Validators.required, Validators.pattern(RegexPattern.ONLY_CHARACTER_SPACE_PATTERN)]],

      state: ['', [Validators.required, Validators.pattern(RegexPattern.ONLY_CHARACTER_SPACE_PATTERN)]],

      zipcode: ['', [Validators.required, Validators.pattern(RegexPattern.ZIP_CODE_VALIDATION)]],

      deliveryDateTime: ['', Validators.required],

      deliveryTime: [''],

      deliveryTimeFormat: ["AM"],

      dropenddate: [''],

      deliveryEndDateTime: [''],

      deliveryEndTimeFormat: ["AM"],

      mindate: [new Date()],

      maxdate: [new Date()],

      actualDeliveryDateTime: [''],

      actualDeliveryTime: [''],

      actualDeliveryTimeFormat: ["AM"],

      actualdropenddate: [''],

      actualDeliveryEndTime: [''],

      actualDeliveryEndTimeFormat: ["AM"],

      actualmindate: [new Date()],

      actualmaxdate: [new Date()],

      isdroptimerange: [false],

      isactualdroptimerange: [false],

      latitude: [0],

      longitude: [0],

      isDeleted: [false],

      consigneeLocationId: [null],

      contacts: this.formBuilder.array([

        this.initContact()

      ]),

      contactList: this.formBuilder.array([]) //set each shipper/consignee contact list separatally

    })

========================================================================================================

initLoadDriverEquipment() {

    return this.formBuilder.group({

      id: [null],

      driver: [null],

      name: [null],

      isDeleted: [false],

      driverEquipments: this.formBuilder.array([

        this.initDriverEquipmentDetails()

      ])

    })

  }

  

  ========================================================================================================

  initDriverEquipmentDetails() {

    return this.formBuilder.group({

      id: [null],

      driver: [''],

      name: [''],

      truckNumber: [''],

      truck: [''],

      trailerNumber: [''],

      trailer: [''],

      totalMiles: [0],

      deadheadMiles: [0],

      systemGeneratedDeadheadMiles: [0],

      systemGeneratedLoadedMiles: [0],

      isDeleted: [false],

      driverRoutes: [''],

      deadheadLocation: this.initDeadheadLocation()

    })

  }

  

  ========================================================================================================

  initDeadheadLocation() {

    return this.formBuilder.group({

      address1: '',

      address2: '',

      city: '',

      state: '',

      zip: '',

      latitude: 0,

      longitude: 0

    });

  }

  

  ========================================================================================================

  

  initFreight() {

    return this.formBuilder.group({

      id: [null],

      description: [null],

      weight: [null, Validators.pattern(RegexPattern.POSITIVE_DECIMAL_ONLY)],

      weightUOMId: [null, Validators.pattern(RegexPattern.ONLY_INTEGER_VALUE_PATTERN)],

      quantity: [null, Validators.pattern(RegexPattern.ONLY_INTEGER_VALUE_PATTERN)],

      quantityUOMId: [null, Validators.pattern(RegexPattern.ONLY_INTEGER_VALUE_PATTERN)],

      length: [null, Validators.pattern(RegexPattern.ONLY_INTEGER_VALUE_PATTERN)],

      width: [null, Validators.pattern(RegexPattern.ONLY_INTEGER_VALUE_PATTERN)],

      height: [null, Validators.pattern(RegexPattern.ONLY_INTEGER_VALUE_PATTERN)],

      dimensionUOMId: [null, Validators.pattern(RegexPattern.ONLY_INTEGER_VALUE_PATTERN)],

      bol: [null, Validators.pattern(RegexPattern.ALPHANUMERIC_PATTERN)],

      po: [null, Validators.pattern(RegexPattern.ALPHANUMERIC_PATTERN)],

      declarationValue: [null, Validators.pattern(RegexPattern.POSITIVE_DECIMAL_ONLY)],

      isDeleted: [false]

    })

  }

  

 ========================================================================================================

  initRevenue() {

    return this.formBuilder.group({

      id: new FormControl(null),

      itemId: new FormControl(null),

      itemName: new FormControl(null),

      description: new FormControl(null),

      quantity: new FormControl(0, [Validators.required, Validators.pattern(RegexPattern.POSITIVE_DECIMAL_ONLY)]),

      rate: new FormControl(0, [Validators.required, Validators.pattern(RegexPattern.POSITIVE_DECIMAL_ONLY)]),

      totalAmount: new FormControl(0),

      isDeleted: new FormControl(false),

      isEarning: new FormControl(false),

      isUOMConversion: new FormControl(false),

      isRevenueSubstract: new FormControl(false),

      measurementUnit: new FormControl(),

      isRevenueItemDeleted: new FormControl(false)

    })

  }

Any suggestions would be thankful.

Thanks,

[Sander Elias]

H Babasaheb,

Pretty sure it's not the nesting of the forms. You might have a 3rth party in there that's triggering a load of change-detection.

It's hard to say, but it would help if you would reproduce the thing on a StackBlitz, that way we can take a look at what's happening, and help you solve your problem.

Regards

Sander