@amirsavand/ngx-common - v5.1.0
    Preparing search index...

    Class ReactiveForm<T>

    Django Rest Framework CRUD ModelViewSet endpoint form builder class.

    T is for type of the data of the form (API object interface). CT is for type of the data of the Crud. CTL is for the type of the data of the Crud in list method.

    Data of the Crud.

    Data of the Crud in list method.

    Type Parameters

    Index

    Constructors

    Properties

    crud: WritableSignal<null | Crud<any, any>> = ...

    CRUD instance for this API. Used for API submission (create or update).

    data: WritableSignal<null | T> = ...

    API model raw data.

    dataChange: EventEmitter<void> = ...

    Triggers when the form data is changed.

    error: WritableSignal<ApiError> = ...

    API errors.

    errorChange: EventEmitter<void> = ...

    Triggers when the form errors update.

    errorStatus: WritableSignal<null | HttpStatusCode> = ...

    API error status.

    form: WritableSignal<FormGroup<any>> = ...

    Form group data for this object.

    id: WritableSignal<null | PK> = ...

    API object ID. If not set, means form is for creation and not edition.

    null
    
    isCreate: Signal<boolean> = ...

    Whether form is in create mode.

    isDirty: WritableSignal<boolean> = ...

    Whether this form is dirty.

    It is only used when ReactiveForm.useDirtyAsPayload is true.

    • markAsClean
    • previousValue
    • dirtyValue
    • getPayload
    • useDirtyAsPayload
    • destroy
    false
    
    loading: WritableSignal<boolean> = ...

    API loading indicator.

    noIdExtractControls: WritableSignal<string[]> = ...

    For these control names, use whole object as control value instead of ID only. (default is []).

    form.noIdExtractControls; // ["tag"]
    form.patch({ tag: { id: 25, name: 'Foo' }});
    form.getPayload(); // { tag: { id: 25, name: 'Foo' }}

    form.noIdExtractControls; // []
    form.patch({ tag: { id: 25, name: 'Foo' }});
    form.getPayload(); // { tag: 25 }
    []
    
    onReset: EventEmitter<void> = ...

    Triggers when the form is reset.

    payloadPipes: WritableSignal<PayloadPipe[]> = ...

    Payload is passed through these methods to be used for final output of ReactiveForm.getPayload.

    Do not call ReactiveForm.getPayload inside pipe functions to prevent infinite loops.

    const pipeA = (form: ReactiveForm<Foo>, payload: Dict): Dict => {
    payload.a = Number(payload.a);
    return payload;
    };
    const pipeB = (form: ReactiveForm<Foo>, payload: Dict): Dict => {
    payload.b = Number(payload.b);
    return payload;
    };
    const form = new ReactiveForm<Foo>({
    payloadPipes: [pipeA, pipeB],
    // Other stuff
    });
    form.value; // { a: "1", b: "2" }
    form.getPayload(); // { a: 1, b: 2 }
    previousValue: WritableSignal<Dict> = ...

    In case of ReactiveForm.useDirtyAsPayload when doing patch, the form value is stored here (no reference) and the dirty value will compare the form value to this value to return the modified (dirty) changes.

    For resetting dirty status, you can call ().

    It is not recommended to touch this property but in a rare scenario where dirty value is not working as expected, you can modify this value to let this class know this is the actual previous value.

    • isDirty
    • markAsClean
    • dirtyValue
    • getPayload
    • useDirtyAsPayload
    • destroy
    {}
    
    subscriptions: Subscription = ...

    Store subscriptions from constructor and unsubscribe from them by invoking ReactiveForm.destroy method.

    Will be used in case of ReactiveForm.useDirtyAsPayload and then the ReactiveForm.destroy invoke is required to unsubscribe.

    success: WritableSignal<boolean> = ...

    API success indicator.

    updateDataOnSubmit: WritableSignal<boolean> = ...

    Update ReactiveForm.data after API call success.

    updateIdOnCreateSubmit: WritableSignal<boolean> = ...

    Update ReactiveForm.id after creation API call success.

    useDirtyAsPayload: WritableSignal<boolean> = ...

    Use ReactiveForm.dirtyValue for payload.

    • isDirty
    • markAsClean
    • previousValue
    • dirtyValue
    • getPayload
    • destroy
    false
    
    viewMode: WritableSignal<boolean> = ...

    UI view mode indicator.

    viewModeChange: EventEmitter<boolean> = ...

    Triggers when form goes to edit mode or view mode only when using setEditStatus.

    You can manually trigger this if you don't use the method mentioned above.

    TEXT: { ERROR_INPUT_INVALID: string; ERROR_INPUTS_REQUIRED_NOT_ENTERED: string } = ...

    Texts used for UI. You can change these for preference or translation.

    Accessors

    • get dirtyValue(): Dict

      Returns Dict

      payload but include only changed values.

    • get valueChanges(): Observable<any>

      Alias for FormGroup.valueChanges.

      Returns Observable<any>

    Methods

    • Returns void

      ReactiveForm.subscriptions

    • Clear out all errors.

      Parameters

      Returns void

    • Update error for a single control.

      Parameters

      • controlName: string

        Name of the control to update error for.

      • errors: string[]

        Array of error strings.

      Returns void

    • Get form value (payload) based on given parameters for manipulation. Override the value of this method for custom payload handling.

      Default value of this method is this code below, you can use it for custom modification if initial variables and pipes are not enough.

      let payload: Dict = Object.assign({}, this.value);
      if (this.useDirtyAsPayload()) {
      payload = this.dirtyValue;
      }
      for (const pipe of this.payloadPipes()) {
      payload = pipe(this, payload);
      }
      return payload;

      Returns Dict

      • ReactiveForm.value
      • ReactiveForm.dirtyValue
      • ReactiveForm.useDirtyAsPayload
      • ReactiveForm.removeEmptyValuesFromPayload
    • Mark form as clean (ignoring changes since patch).

      Returns void

      • dirtyValue
      • isDirty
    • Update a form value with given data. Supports dict values as well. Used to update form group from a retrieve API call data.

      For object values, it stores their "id" instead of the whole object. For array values, it stores list of "id"s instead of the entire objects.

      You want to call this when you get the response from the API to populate the form with the data.

      Parameters

      • data: T

        Data to patch to the form (usually comes from API response).

      • Optionalemit: boolean = false

        Whether to trigger valueChanges for the form control

      • OptionalsetId: boolean = true

        Set the ReactiveForm.id to the form from the data

      • OptionalsetData: boolean = true

        Set the ReactiveForm.data to the form to the data

      • OptionalresetDirty: boolean = true

        Reset all dirty controls

      Returns void

    • Reset the reactive form to empty state.

      Parameters

      • Optionalid: boolean = false

        Clear form ID

      • Optionaldata: boolean = false

        Clear form data

      • OptionalrestoreFromData: boolean = true

        Restore reactive form data from form data

      Returns void

    • Use ReactiveForm.patch and use the original data from ReactiveForm.data.

      Parameters

      • Optionalemit: boolean = false

        Whether to trigger valueChanges for the form control

      • OptionalsetId: boolean = true

        Set the ReactiveForm.id to the form from the data

      • OptionalsetData: boolean = true

        Set the ReactiveForm.data to the form to the data

      • OptionalresetDirty: boolean = true

        Reset all dirty controls

      Returns void

    • Set the form to edit mode or view mode.

      Useful for the UI to edit or cancel edit.

      Parameters

      • Optionalstatus: boolean = true

        True to set to edit mode.

      • Optionalrestore: boolean = true

        Invoke restoreForm if status is false. Good for canceling the form to previous state.

      Returns void

      • viewModeChange
      • viewMode
    • Submit the form.

      Parameters

      • OptionalparentPk: PK

      Returns Observable<T>

    • Method used to catch error from submission.

      Handles:

      • loading
      • success
      • error

      Parameters

      • error: HttpErrorResponse

      Returns Observable<never>

    • Triggers ReactiveForm.validateControls and if any error found the error.detail will be set.

      Returns boolean

      whether form contains any error.

    • Sets error for each invalid control in the form just like the DRF error ApiError.

      Used to validate and show errors for inputs before making an API call.

      Also used in ReactiveForm.validate.

      Returns void