3 min read

Tags

  • RxJs
  • shareReplay
  • Angular
  • Form Arrays

Just read this article by Nicholas Jamieson which gave me a whole lot of new insights into how RxJs operator functions are written. I encourage you to have a look.

So I have this contact form component with multiple form arrays whose items are added dynamically from the template and during initialization.

export class CreateContactComponent extends FormCanDeactivate implements OnInit {


  form: FormGroup;

  guids = DropdownGuids;
  categoryOptions$: Observable<Array<IServerDropdownOption>>;
  countryOptions$: Observable<Array<IServerDropdownOption>>;
  programOptions$: Observable<Array<IServerDropdownOption>>;
  bucketOptions$: Observable<Array<IServerDropdownOption>>;
  fileAsOptions$: Observable<IServerDropdownOption[]>;
  socialLabels$: Observable<IServerDropdownOption[]>;
  phoneLabels$: Observable<IServerDropdownOption[]>;
  emailLabels$: Observable<IServerDropdownOption[]>;
  websiteLabels$: Observable<IServerDropdownOption[]>;
  addressLabels$: Observable<IServerDropdownOption[]>;
  recurringEventLabels$: Observable<IServerDropdownOption[]>;

  @Input() formData: IMainContact;

  constructor(
    private fb: FormBuilder,
    private contactsService: ContactsService,
    private countryService: CountryService
  ) { }


  ngOnInit() {
    this.categoryOptions$ = this.contactsService.categoryList();
    this.countryOptions$ = this.countryService.fetchAll();
    this.programOptions$ = this.contactsService.programsList(this.guids.PROGRAMS_CONTACT);
    this.bucketOptions$ = this.contactsService.bucketList();
    this.socialLabels$ = this.contactsService.labelsList(this.guids.SOCIAL_LABELS);
    this.phoneLabels$ = this.contactsService.labelsList(this.guids.PHONE_LABELS);
    this.emailLabels$ = this.contactsService.labelsList(this.guids.EMAIL_LABELS);
    this.websiteLabels$ = this.contactsService.labelsList(this.guids.WEBSITE_LABELS);
    this.addressLabels$ = this.contactsService.labelsList(this.guids.ADDRESS_LABELS);
    this.recurringEventLabels$ = this.contactsService.labelsList(this.guids.RECURRING_EVENT_LABELS);

    this.initForm();
  }


  initForm() {
      const addresses = this.formData && this.formData.addresses
          ? this.formData.addresses.map(address => this.createAddress(address))
          : [this.createAddress()];

      const recurring_events = this.formData && this.formData.recurring_events
          ? this.formData.recurring_events.map(event => this.createRecurringEvent(event))
          : [this.createRecurringEvent()];

      const follow_ups = this.formData && this.formData.follow_ups
          ? this.formData.follow_ups.map(follow_up => this.createFollowUp(follow_up))
          : [this.createFollowUp()];

      const phones = this.formData && this.formData.phones
          ? this.formData.phones.map(phone => this.createLabeledPhoneInput(phone))
          : [this.createLabeledPhoneInput()];

      const buckets = this.formData && this.formData.buckets || [];

      const categories = this.formData && this.formData.categories || [];

    this.form = this.fb.group({
      first_name: [this.formData && this.formData.first_name],
      middle_name: [this.formData && this.formData.middle_name],
      last_name: [this.formData && this.formData.last_name],
        image: [this.formData && this.formData.image],
      dob: [this.formData && this.formData.dob],
      initials: [this.formData && this.formData.initials],
      spouse_name: [this.formData && this.formData.spouse_name],
      file_as: [this.formData && this.formData.file_as],
      company_name: [this.formData && this.formData.company_name],
      job_title: [this.formData && this.formData.job_title],
      phones: this.fb.array([...phones]),
      emails: this.fb.array([...this.labeledAddressInputsOrNew(this.formData && this.formData.emails)]),
      websites: this.fb.array([...this.labeledAddressInputsOrNew(this.formData && this.formData.websites)]),
      socials: this.fb.array([...this.labeledAddressInputsOrNew(this.formData && this.formData.socials)]),
      recurring_events: this.fb.array([...recurring_events]),
      addresses: this.fb.array([...addresses]),
      follow_ups: this.fb.array([...follow_ups]),
      notes: [this.formData && this.formData.notes],
      add_to_outlook: [this.formData && this.formData.add_to_outlook],
      categories: [[...categories]],
      buckets: [[...buckets]],
      programs: [this.formData && this.formData.programs],
    });
  }

createLabeledPhoneInput(data?: ILabeledPhoneInput): FormGroup {
      return this.fb.group({
          id: [data && data.id],
          type: [data && data.type],
          number: [data && data.number],
      });
  }

    labeledPhoneInputsOrNew(inputs: ILabeledPhoneInput[] = []): FormGroup[] {
        return inputs && inputs.length
            ? this.createLabeledPhoneInputs(inputs)
            : [this.createLabeledAddressInput()];
    }

  createLabeledPhoneInputs(inputs: ILabeledPhoneInput[]): FormGroup[] {
      return inputs.map(input => this.createLabeledPhoneInput(input));
  }

  createLabeledAddressInputs(inputs: ILabeledAddressInput[]): FormGroup[] {
      return inputs.map(input => this.createLabeledAddressInput(input));
  }

  labeledAddressInputsOrNew(inputs: ILabeledAddressInput[] = []): FormGroup[] {
      return inputs && inputs.length
          ? this.createLabeledAddressInputs(inputs)
          : [this.createLabeledAddressInput()];
  }
  createLabeledAddressInput(data?: ILabeledAddressInput) {
      return this.fb.group({
          id: [data && data.id],
          type: [data && data.type],
          address: [data && data.address],
      });
  }
  createAddress(data?: IContactAddress) {
      return this.fb.group({
          id: [data && data.id],
          type: [data && data.type],
          street: [data && data.street],
          unit: [data && data.unit],
          city: [data && data.city],
          state: [data && data.state],
          postal_code: [data && data.postal_code],
          country: [data && data.country],
      });
  }
  createRecurringEvent(data?: IRecurringEventContact) {
      return this.fb.group({
          id: [data && data.id],
          type: [data && data.type],
          date: [data && data.date],
          description: [data && data.description],
      })
  }
  createFollowUp(data?: IFollowUp) {
      return this.fb.group({
          id: [data && data.id],
          start_date: [data && data.start_date],
          end_date: [data && data.end_date],
          notes: [data && data.notes],
          method: [data && data.method],
      })
  }
}

Here’s what the template for the phones form array looks like.

<!-- PHONE -->
<div class="row">
    <div class="col-md-12">
        <h4 class="form-section__title">
            <igx-icon class="form-section__icon">phone</igx-icon> Phone
        </h4>

        <ng-container formArrayName="phones"
                      *ngFor="let phone of phones.controls; let i = index;">
            <div class="row">
                <div class="col-12">
                    <ng-container [formGroupName]="i">
                        <igx-input-group>
                            <igx-prefix class="prefix__label-select">
                                <app-dropdown formControlName="type"
                                              placeholder="Select label"
                                              (click)="$event.stopPropagation();"
                                              [options]="phoneLabels$ | async">

                                </app-dropdown>
                            </igx-prefix>
                            <input igxInput name="number" formControlName="number"
                                   type="text" placeholder="(123) 456-7890"/>

                            <igx-suffix class="button__remove" *ngIf="hasTwoOrMoreItems(phones)">
                                <button igxButton="icon" igxRipple type="button"
                                        (click)="removeFormArrayItem(i, phones); $event.stopPropagation();"
                                        igxRippleCentered="true">
                                    <igx-icon fontSet="material">close</igx-icon>
                                </button>
                            </igx-suffix>
                        </igx-input-group>
                    </ng-container>
                </div>
            </div>
        </ng-container>
    </div>
    <div class="col-md-12">
        <div class="x-small-space"></div>
        <button type="button" (click)="addFormArrayGroup(createLabeledPhoneInput(), phones)"
                igxButton="raised" igxButtonBackground="#f2f2f2" igxRipple class="btn-add">
            Add
        </button>
    </div>
</div>

On clicking the Add button, the addFormArrayGroup(createLabeledPhoneInput(), phones) method is called which creates and add a new item to the phones form array.

This however triggers the creation and subscription to a new phoneLabels$ observable for the phone type dropdown options. This is the behaviour I don’t want given it triggers an http request to fetch the options.

<app-dropdown formControlName="type"
              placeholder="Select label"
              (click)="$event.stopPropagation();"
              [options]="phoneLabels$ | async">

</app-dropdown>

Adding the shareReplay RxJs operator to the observable removes this behaviour.

This operator is a specialization of replay that connects to a source observable and multicasts through a ReplaySubject constructed with the specified arguments.

For a more in-depth look into it’s functioning, look here.

So here’s how my observables look after this update.

this.categoryOptions$ = this.contactsService.categoryList().pipe(shareReplay());
this.countryOptions$ = this.countryService.fetchAll().pipe(shareReplay());
this.programOptions$ = this.contactsService.programsList(this.guids.PROGRAMS_CONTACT).pipe(shareReplay());
this.bucketOptions$ = this.contactsService.bucketList().pipe(shareReplay());
this.socialLabels$ = this.contactsService.labelsList(this.guids.SOCIAL_LABELS).pipe(shareReplay());
this.phoneLabels$ = this.contactsService.labelsList(this.guids.PHONE_LABELS).pipe(shareReplay());
this.emailLabels$ = this.contactsService.labelsList(this.guids.EMAIL_LABELS).pipe(shareReplay());
this.websiteLabels$ = this.contactsService.labelsList(this.guids.WEBSITE_LABELS).pipe(shareReplay());
this.addressLabels$ = this.contactsService.labelsList(this.guids.ADDRESS_LABELS).pipe(shareReplay());
this.recurringEventLabels$ = this.contactsService.labelsList(this.guids.RECURRING_EVENT_LABELS).pipe(shareReplay());