Observable Values on form inputs

This guide explains how we use BehaviorSubject to create observable-driven form inputs, allowing real-time reactivity between fields such as name and slug

1. Observable Binding: slugText$

We initialize a BehaviorSubject that holds the latest value of the slug field.

import { BehaviorSubject } from 'rxjs';

public slugText$ = new BehaviorSubject<string>('');

This allows us to reactively update the slug when the user types in the name field.

2. Manual Input Builder Function

We use a dynamic manualInputsFn() to generate form fields. This function accepts an optional Project and returns a set of form inputs.

override manualInputsFn = (project?: Project) => {
  return [
    ...
  ] as FormInput<Project>[];
};

3. Field Interactions

name Field

This field is of type text. When its value changes, it automatically updates the slugText$ observable.

{
  key: 'name',
  inputType: FormInputType.text,
  value: project?.name,
  onChange: (value: string) => { 
  //here when we change aany thing in the feild the another feilds will change also
    this.slugText$.next(value.toLowerCase());
  }
}

slug Field (Reactive)

This field binds its value directly to slugText$ – a live observable. This keeps it synced with the name field input.à

{
  key: 'slug',
  inputType: FormInputType.text,
  value: this.slugText$
}