Angular getting "TS2531: Object is possibly 'null' on object values-CodePudding

I'm trying to put form controls values in an object to pass in an onSubmit method but when I assign the values of the form controls to the object I get this error TS2531: Object is possibly 'null'. when hovering the filters object properties in the onSubmit() method

my code:

export class SearchBarComponent implements OnInit {
  filtersForm! : FormGroup
  constructor(private jobService : JobsService) { }
  @Output() OutputFilter = new EventEmitter<string>()
  
  filters! : {
    city: string,
    level: string
  }

  ngOnInit(): void {
    this.filtersForm = new FormGroup({
      city: new FormControl('Italy, Roma'),
      level: new FormControl(),
    })
  }

  onSubmit(): void{
    this.filters = {
      city : this.filtersForm.get('city').value,
      level : this.filtersForm.get('level').value
    }
    this.OutputFilter.emit(this.filters)
    console.log('Submitted')
  }

}

what am I doing wrong here? I tried adding ! and ? operators to everything but I can't figure out what is the problem

CodePudding user response：

From Angular DOC

On any FormGroup, it is possible to disable controls. Any disabled control will not appear in the group's value.

More specifically, the type of this.filtersForm.get('city').value is string|undefined, and TypeScript will enforce that you handle the possibly undefined value (if you have strictNullChecks enabled).

If you want to access the value including disabled controls, and thus bypass possible undefined fields, you can use this.filtersForm.getRawValue()

Try this:

onSubmit(): void{
    const {city, level} = this.filtersForm.getRawValue();
    this.filters = {
      city,
      level 
    }
    this.OutputFilter.emit(this.filters)
    console.log('Submitted')
  }

CodePudding user response：

Just a couple of things in addition to the pretty good answer from Chellapan:

The reason why the "get" method could return a null value is clearly written in the code itself: Abstract Model (AbstractControl class)
Regardless of the disabled (or not) status of the field, you are actually using a string literal to access the form property: this is prone to errors and, in fact, could lead to the access of a non existent property on your FormGroup instance. This is another good reason for the FormGroup to eventually returning null
The get returns an AbstractControl as it doesnt actually know at compile time if the element you are trying to get is a FormControl or a FormGroup itself. The AbstractControl is extended from both the FormControl and the FormGroup classes, so it is a proper return type
I personally like to access the property with the optional chaining operator (see here on MDN) for safely going through eventually null object properties

this.filters = { city : this.filtersForm.get('city').value, level : this.filtersForm.get('level').value }

Something more about your code: remember that class properties should be camelCased and not PascalCased as you did with OutputFilter