FormSource Class

Implements the DataSource interface, providing a way to interact with the data stored in Angular form. This class offers functionality to retrieve, set, observe, and remove data from any AbstractControl, including FormControl, FormGroup, and FormArray

@template T
The type of data managed by the Angular form

API

class FormSource<T> implements DataSource<T> {
  readonly $: Observable<T>;
  get(): T;
  set(value: T): void;
  remove(): void;
}

Example

import {FormControl, FormGroup} from '@angular/forms';
import {formSource, signalState} from '@bitfiber/ng/rx'; 
 
interface FormValue {
  itemId: number;
  search: string;
}
 
// Creates a form group
const formGroup = new FormGroup({
  itemId: new FormControl(1, {nonNullable: true}),
  search: new FormControl('', {nonNullable: true}),
});
 
// Creates a form source
const source = formSource<FormValue>(formGroup);
 
// Creates a form state synchronized with the form
const formState = signalState<FormValue>({itemId: 1, search: ''}, s => s
  // Connects the state with the form group.
  // Ensures two-way synchronization between the state and the form group:
  // - Changing the state updates the form group.
  // - Changing the form group updates the state.
  .connect(source));

formSource $