Setting Default Values in an Angular Reactive Form

Something I ran into a few months back was that Angular won't reset a FormControl back to its initial value if you call reset() on the FormGroup unless that FormControl was created with nonNullable: true. Here's an example:

  private createForms(formBuilder: FormBuilder): void {

    //For the initial values to be considered the *default* values, we need to specify nonNullable: true.

    //There used to be a dedicated property for this, but they deprecated it.

    this.searchForm = formBuilder.group<ISearchForm>({

      adminYear: new FormControl<number>(null, { validators: Validators.required }),

      admin: new FormControl<string>('All', { nonNullable: true, validators: Validators.required }), //Validator is kind of pointless here, as there WILL always be a value

      examName: new FormControl<string | null>(null),

      dateApproved: new FormControl<string>('Both', { nonNullable: true }),

      status: new FormControl<string>('Draft', { nonNullable: true })

    });