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.

Type Parameters

Constructors

Properties

crud?: Crud<any, any>

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

data?: T

API model raw data.

dataChange: EventEmitter<void> = ...

Triggers when the form data is changed.

error: ApiError = {}

API errors.

errorChange: EventEmitter<void> = ...

Triggers when the form errors update.

errorStatus?: number

API error status.

form: FormGroup<any>

Form group data for this object.

id?: PK

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

isDirty: boolean = false

Whether this form is dirty.

It is only used when ReactiveForm.useDirtyAsPayload is true.

  • markAsClean
  • previousValue
  • dirtyValue
  • getPayload
  • useDirtyAsPayload
  • destroy
loading: boolean = false

API loading indicator.

noIdExtractControls: 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: 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: 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: boolean = false

API success indicator.

updateDataOnSubmit: boolean = true

Update ReactiveForm.data after API call success.

updateIdOnCreateSubmit: boolean = true

Update ReactiveForm.id after creation API call success.

useDirtyAsPayload: boolean = false

Use ReactiveForm.dirtyValue for payload.

  • isDirty
  • markAsClean
  • previousValue
  • dirtyValue
  • getPayload
  • destroy
viewMode: boolean = false

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_INPUTS_REQUIRED_NOT_ENTERED: string;
    ERROR_INPUT_INVALID: string;
} = ...

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

Accessors

Methods

  • 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.

    const getPayload = (): Dict => {
    let payload: Dict = Object.assign({}, this.value);
    if (form.removeEmptyValuesFromPayload) {
    payload = removeEmptyValuesFromDict(
    payload,
    form.removeEmptyArraysFromPayload\
    );
    }
    if (form.useDirtyAsPayload) {
    payload = form.dirtyValue;
    }
    for (const pipe of form.payloadPipes) {
    payload = pipe(payload);
    }
    return payload;
    }

    Returns Dict

    • ReactiveForm.value
    • ReactiveForm.dirtyValue
    • ReactiveForm.useDirtyAsPayload
    • ReactiveForm.removeEmptyValuesFromPayload
  • 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).

    • emit: boolean = false

      Whether to trigger valueChanges for the form control (default is false).

    • setId: boolean = true

      Set the ReactiveForm.id to the form from the data (default is true).

    • setData: boolean = true

      Set the ReactiveForm.data to the form to the data (default is true).

    • resetDirty: boolean = true

      Reset all dirty controls (default is true).

    Returns void

  • Reset the reactive form to empty state.

    Parameters

    • id: boolean = false

      Clear form ID (default is false).

    • data: boolean = false

      Clear form data (default is false).

    • restoreFromData: boolean = true

      Restore reactive form data from form data (default is true).

    Returns void

  • Set the form to edit mode or view mode.

    Useful for the UI to edit or cancel edit.

    Parameters

    • status: boolean = true

      True to set to edit mode.

    • restore: boolean = true

      Invoke restoreForm if status is false (default is true). Good for canceling the form to previous state.

    Returns void

    • viewModeChange
    • viewMode