Use of objects inside FormBuilder

Question

I've created a reactive form and It's working fine:

ts file:

this.formulario = this.formBuilder.group({
  title:[null, [Validators.required, Validators.minLength(3)] ],
  dateHour:[null, [Validators.required] ],
  description:[null, [Validators.required] ], 
  location: this.formBuilder.group({
            idLocation: [null],
            lat:[null],
            lng:[null],
  }),
});

After that, I've created a class for each one:

export class Ocr {
    idOcr: number;
    title: string;
    dateHour: Date;
    description: string;
    location: Location;
}

export class Location {
    idLocation: number;
    lat: number;
    lng: number;
}

Then, I've instanciated the object in the ts file and I would like to use the atributes in the FormBuilder. In this case, I don't know what write in the location atribute:

ocr: Ocr = new Ocr();

...

this.formulario = this.formBuilder.group({
  title:[this.ocr.title, [Validators.required, Validators.minLength(3)] ],
  dateHour:[this.ocr.DateHour, [Validators.required] ],
  description:[this.ocr.description, [Validators.required] ], 
  location: ??????? 
  }),
});

I would like to know how I have to represent it in the html file too.

Answer 1

You can add a new formGroup like so:

this.formulario = this.formBuilder.group({
  title:[this.ocr.title, [Validators.required, Validators.minLength(3)] ],
  dateHour:[this.ocr.DateHour, [Validators.required] ],
  description:[this.ocr.description, [Validators.required] ], 
  location: this.formBuilder.group({
      lat:[this.ocr.location.lat, [Validators.required] ],
      lng:[this.ocr.location.lng, [Validators.required] ],
    })
  }),
});