Angular 7 reactive form how to reset the form and get its initial values instead of resetting them to empty values

You can save the form initial values:

this.initialValues = this.formGroup.value;

And then pass those values to the reset function:

this.formGroup.reset(this.initialValues);

Tou should make control nonNullable // If this flag is set, the control will instead reset to the initial value.

const cat = new FormControl('tabby', {nonNullable: true});
cat.reset(); 

cat.value is "tabby"

Please find the stackbliz here

https://stackblitz.com/edit/angular-material-ciztu9

Angular Provides reset(formState:any = null), you can pass the initial formState/object as a first parameter

For more info https://angular.io/api/forms/FormControl#reset

Create a method setForm() which will be called in the constructor and reset()

setForm() {
  this.formGroup = this.fb.group({
    'family_relation': new FormControl(this.familyRelationArray[0]['family_relation_id'])
  });
}

(Remove the code from the constructor which set the initial values)

resetForm() now looks like:

reset() {
    this.formGroup.reset();
    //Or
    this.formGroup.markAsPristine;
    //Or
    this.formGroup.markAsTouched

    this.setForm();
  }

And the constructor:

constructor(private fb: FormBuilder) {

    this.familyRelationArray = [
      {
        family_relation_id: 1,
        family_relation_type: 'Parent'
      },
      {
        family_relation_id: 2,
        family_relation_type: 'Sister'
      }
    ];
    this.setForm();

  }

Each FormControl has a readonly property defaultValue that will be used to reset the value when the control is being reset without a explicit value.

Normally when creating a new FormControl the defaultValue will be set to null but when passing { nonNullable: true } as the options argument the defaultValue will be set to the initial value you pass to the control. Calling reset without an argument will now reset the control to the initial value.

const value = 'my initial value';
const formControl = new FormControl(value, { nonNullable: true });

formControl.reset(); // Resetting to initial value.

Note:

See also the comment inside the FormControl class at the defaultValue:

/**
 * The default value of this FormControl, used whenever the control is reset without an explicit
 * value. See {@link FormControlOptions#nonNullable} for more information on configuring
 * a default value.
 */
readonly defaultValue: TValue;

More information from the FormControlOptions at the nonNullable property:

/**
 * @description
 * Whether to use the initial value used to construct the `FormControl` as its default value
 * as well. If this option is false or not provided, the default value of a FormControl is `null`.
 * When a FormControl is reset without an explicit value, its value reverts to
 * its default value.
 */
nonNullable?: boolean;

There might be other ways of doing it, but I would do it using one of following methods:

Method 1: Passing values to the reset method.

reset() {
  this.formGroup.reset({family_relation: 1});
  //Or
  this.formGroup.markAsPristine;
  //Or
  this.formGroup.markAsTouched;
}

Method 2: Setting values

reset() {
  this.formGroup.reset();
  //Or
  this.formGroup.markAsPristine;
  //Or
  this.formGroup.markAsTouched;
  // this.formGroup.get('family_relation').setValue(1)
}