How to use @sitecore-jss/sitecore-jss-forms - 6 common examples

if (typeof fieldState.value !== 'undefined') {
        // field state from changed field value (in this.state)
        result.value = fieldState.value;
      } else {
        result.value = getFieldValueFromModel(field);
      }

      return result;
    }

    // default state from form API model
    return {
      isValid: true,
      errors: [],
      value: getFieldValueFromModel(field),
    };
  }

}

    const fieldState = this.state[fieldName];

    // field has a value in react state i.e. due to user change
    if (fieldState) {
      const result: FieldState = {
        isValid: fieldState.isValid,
        errors: fieldState.errors || [],
      };

      if (typeof fieldState.value !== 'undefined') {
        // field state from changed field value (in this.state)
        result.value = fieldState.value;
      } else {
        result.value = getFieldValueFromModel(field);
      }

      return result;
    }

    // default state from form API model
    return {
      isValid: true,
      errors: [],
      value: getFieldValueFromModel(field),
    };
  }

getCurrentFieldState(field: FormField) {
    // non-valued fields, i.e. text, section, do not have a value or validity state
    if (!instanceOfValueFormField(field)) {
      return null;
    }

    const fieldName = field.valueField.name || null;

    if (!fieldName) {
      return null;
    }

    const fieldState = this.state[fieldName];

    // field has a value in react state i.e. due to user change
    if (fieldState) {
      const result: FieldState = {
        isValid: fieldState.isValid,
        errors: fieldState.errors || [],

super(props);

    this.state = {
      errors: [],
      // in a multistep form the server can reset the form schema
      // to display further steps; this state property overrides
      // the form passed in from props if present
      nextForm: null,
      submitButton: null,
    } as any; // workaround index type limitations in TS

    this.createFieldComponent = this.createFieldComponent.bind(this);
    this.getCurrentFieldState = this.getCurrentFieldState.bind(this);
    this.collectCurrentFieldValues = this.collectCurrentFieldValues.bind(this);

    this._tracker = new FormTracker({
      endpoint: `${this.props.sitecoreApiHost}/api/jss/fieldtracking/register?sc_apikey=${this.props.sitecoreApiKey}`,
      fetcher: this.props.trackerFetcher,
    });
  }

const fieldValues: { [key: string]: string | string[] | boolean } = {};

    const currentFieldValues = this.collectCurrentFieldValues();

    currentFieldValues.forEach(field => {
      if (typeof field.state.value !== 'undefined') {
        fieldValues[field.fieldName] = field.state.value;
      }
    });

    // NOTE: we're not pre-validating the submit on the client because
    // Sitecore won't be able to track validation errors in xConnect

    // serialize the form data that we got from the server
    // (hidden fields with constant values, unchanged default field values, etc)
    const formData = serializeForm(form, { submitButtonName: this.state.submitButton });

    // merge in user-updated field values
    formData.mergeOverwritingExisting(fieldValues);

    const submitUrl = (e.target as HTMLFormElement).action;

    if (!submitUrl) {
      throw new Error('Submit URL was not defined. Ensure the form has an action attribute.');
    }

    submitForm(formData, submitUrl, { fetcher: this.props.formFetcher })
      .then((result) => {
        if (result.success && result.redirectUrl) {
          // Process redirect-on-success action.
          if (this.props.onRedirect) {
            this.props.onRedirect(result.redirectUrl);

// Sitecore won't be able to track validation errors in xConnect

    // serialize the form data that we got from the server
    // (hidden fields with constant values, unchanged default field values, etc)
    const formData = serializeForm(form, { submitButtonName: this.state.submitButton });

    // merge in user-updated field values
    formData.mergeOverwritingExisting(fieldValues);

    const submitUrl = (e.target as HTMLFormElement).action;

    if (!submitUrl) {
      throw new Error('Submit URL was not defined. Ensure the form has an action attribute.');
    }

    submitForm(formData, submitUrl, { fetcher: this.props.formFetcher })
      .then((result) => {
        if (result.success && result.redirectUrl) {
          // Process redirect-on-success action.
          if (this.props.onRedirect) {
            this.props.onRedirect(result.redirectUrl);
          } else {
            window.location.href = result.redirectUrl;
          }
        }

        if (result.validationErrors) {
          const stateUpdate: FieldStateCollection = {};
          Object.keys(result.validationErrors).forEach((fieldKey) => {
            stateUpdate[fieldKey] = {
              value: (this.state[fieldKey] || {}).value,
              isValid: false,