Apologies if my question is a duplicate, I have found several solutions for the same issue on Stack Overflow, but unfortunately, I struggle to understand them 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 use the optional operator ?, the problem disappears and the app runs smoothly. I would like to understand 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;
~~~~~~~~~
When trying to add form data, I initialize it as shown 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
}
}
Can someone please assist me with this?