Problem in understanding Interface and FormGroup issue in Angular

Question

My question may be duplicate, apologize for that. there is lot of solutions available same issue in SO, but unfortunately am not able to understand that in technical terms.

Problem 1

src/app/models/dataModel.ts:2:5
2     id: number;
      ~~
The expected type comes from property 'id' which is declared here on type 'DataModel'


Error: src/app/models/dataModel.ts:2:5 - error TS2564: Property 'id' has no initializer and is not definitely assigned in the constructor.

2     id: number; 

my dataModal.ts

export class DataModel {
    id: number;
    name?: string;
    gender?: string;
    age?: number;
    address?: string;
    city?: string;
    country?: string;
    status?: string;
    date?: Date;
}

case-details.component.ts

export class CasesDetailsComponent implements OnInit {
  isLoadingResult = true;
  cases: DataModel = { id: null || undefined, name: '', gender: '', age: null || undefined, address: '', city: '' };

. for problem 1, whenever I ? optional operator, problem gone and app running smoothly.. I would like to understand, what is the purpose of using ? and why?

Problem 2

Error: src/app/component/add-case/add-case.component.ts:22:3 - error TS2564: Property 'formGroup' has no initializer and is not definitely assigned in the constructor.

22   formGroup: FormGroup;
     ~~~~~~~~~

trying to add form data, so initializing like below in add-case.component.ts

export class AddCaseComponent implements OnInit {
  isLoadingResult = true;

  formGroup: FormGroup;
  id = null;
  name = '';
  age = null;
  status = '';
  gender = '';
  genderList = ['Male', 'Female',];
  statusList = [ 'Positive', 'Negative'];
  address = '';
  city = '';
  country = '';


  constructor(private router: Router, private api: ApiService, private formBuilder: FormBuilder) { }

  ngOnInit(): void {
    this.formGroup = this.formBuilder.group({
      name: [null, Validators.required],
      age: [null, Validators.required],
      status: [null, Validators.required],
      gender: [null, Validators.required],
      address: [null, Validators.required],
      city: [null, Validators.required],
      country: [null, Validators.required]
    });
  }



saveRecord(): void {
    this.isLoadingResult = true;
    this.api.addNewCaseDetails(this.formGroup.value).subscribe((response: any) => {
// other stuffs
}

}

package.json

"dependencies": {
    "@angular/animations": "~11.2.8",
    "@angular/cdk": "^11.2.8",
    "@angular/common": "~11.2.8",
    "@angular/compiler": "~11.2.8",
    "@angular/core": "~11.2.8",
    "@angular/forms": "~11.2.8",
    "@angular/material": "^11.2.8",
    "@angular/platform-browser": "~11.2.8",
    "@angular/platform-browser-dynamic": "~11.2.8",
    "@angular/router": "~11.2.8",

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true,
    "strictPropertyInitialization": false
  }
}

Could someone pls help me on this?

Answer 1

The problem you have is that you are defining class but without inializing properties (either in constructor or directly when you define them). Since Typescript is showing you this message, I assume that you are in strict mode which is why you get this.

To answer your first question : the ? in id?: means that the property is optional, it is not necessaries for her to have a value, it can be null. Another solution would be to define a constructor with the id parameter : constructor(id: number){this.id = id;}

For your second question, you should try moving your form initialization in your constructor body :

constructor(private router: Router, private api: ApiService, private formBuilder: FormBuilder) { 
  this.formGroup = this.formBuilder.group({
      name: [null, Validators.required],
      age: [null, Validators.required],
      status: [null, Validators.required],
      gender: [null, Validators.required],
      address: [null, Validators.required],
      city: [null, Validators.required],
      country: [null, Validators.required]
    });
}

as for the why it is a best practice I don't have the answer at the moment but i'll look for it.

Edit : I looked a bit and found this : link.

Typescript need to be sure that a property not defined as optional has a value (to avoid 'undefined' and technical issues at runtime). It seems that instead of moving your formGroup initialization to your constructor, you can also declare it like this :

myFormGroup!: FormGroup  // see the ! mark, it means that the property will be initialized in an other place that the constructor.

constructor(...) {}

ngOnInit() {
   this.myFormGroup = this.fb.formGroup({...});
}