How to use FormControl result into interface instance?

Question

I have the form in FormGroup instance and after submit I should set filled values into the object created by the interface scheme. But when I trying directly do this I stuck with error:

ERROR in src/app/modules/objects/object-form/object-form-components/object-information/object-information.component.ts(97,9): error TS2322: Type '{ title: any; type_id: any; basises: any; problems: any; material_id: any; ' is not assignable to type 'ObjectFormComponent'. Object literal may only specify known properties, and 'title' does not exist in type 'ObjectFormComponent'.

const controls = this.informationForm.controls;
export interface ObjectCreateRequest {
  title: string;
  type_id: string;
  problems: string[];
  material_id: string;
}

const request: ObjectCreateRequest = {
  title: controls.title.value,
  type_id: controls.type.value.id,
  problems: controls.problems.value.map(item => item.id),
  material_id: (controls.material.value ? controls.material.value.id : null)
};

Into form all controls with any types and this invalid for the interface.

How I can do this?

Answer 1

Your error seems pretty clear, if you read through your error message. Specifically, 'title' does not exist in type 'ObjectFormComponent'. Note that the error isn't describing the code you posted -- take a look at the filename and line number in your error to track down the line in question.

You have an object somewhere that defines 5 properties: title, type_id, basises, problems, and material_id. You used your types to tell TypeScript to expect an object of type ObjectFormComponent somewhere, but gave it that object instead. The problem is, your object has a field called title, which doesn't exist on ObjectFormComponent's definition.

Does that make sense?