英文:
Angular - How to resolve object is possibly null for a FormGroup
问题
在Angular-15项目中，我在component.ts文件中找到了以下代码：
component.ts:
export class CountryCreateComponent {countriesDatas: any[] = [];selectedCountryCode: string = '';selectedCountryName: string = '';createCountryForm!: FormGroup;constructor(private fb: FormBuilder,private toastr: ToastrService) {}createCountry() {this.createCountryForm = this.fb.group({CountryCode: ['', [Validators.required]],CountryName: [''],});}createValidate() {if (!this.createCountryForm.valid) {this.createCountryForm.markAllAsTouched();return;}}get fc() {return this.createMerchantForm.controls;}constructor(private fb: FormBuilder) {}ngOnInit(): void {;}onCountryChange() {const selectedCountry = this.countriesDatas.find(selectedCountryCode => {return selectedCountryCode.country_code === this.form.get('countryCode').value;});if (selectedCountry) {this.createCountryForm.get('countryCode').setValue(selectedCountryCode.country_code);this.createCountryForm.get('countryName').setValue(selectedCountryName.country_name);}}}}
然而，我遇到了这个错误：object is possibly null。
然后，在 this.createCountryForm.get 中，createCountryForm 被标记为问题点。
如何解决这个问题呢？
英文:
In Angular-15 project I have this code in the component.ts:
component.ts:
export class CountryCreateComponent {countriesDatas: any[] = [];selectedCountryCode: string = '';selectedCountryName: string = '';createCountryForm!: FormGroup;constructor(private fb: FormBuilder,private toastr: ToastrService) {}createCountry() {this.createCountryForm = this.fb.group({CountryCode: ['', [Validators.required]],CountryName: [''],});}createValidate() {if (!this.createCountryForm.valid) {this.createCountryForm.markAllAsTouched();return;}}get fc() {return this.createMerchantForm.controls;}constructor(private fb: FormBuilder) {}ngOnInit(): void {;}onCountryChange() {const selectedCountry = this.countriesDatas.find(selectedCountryCode => {return selectedCountryCode.country_code === this.form.get('countryCode').value;});if (selectedCountry) {this.createCountryForm.get('countryCode').setValue(selectedCountryCode.country_code);this.createCountryForm.get('countryName').setValue(selectedCountryName.country_name);}}}}
However, I got this error: object is possibly null
Then createCountryForm is highlighted in this.createCountryForm.get
How do I resolve this?
答案1
得分: 1
你可以使用"nullish coalescing operator" (??) 或可选链 (?.) 来处理变量可能为null的情况。
this.createCountryForm.get('countryCode') ?? {value:''/*默认值*/}.value
或
this.createCountryForm.get('countryCode')?.value
关于为什么formControl可能为null的详细解释请查看这里
英文:
You can use the "nullish coalescing operator" (??) or optional chaining (?.) to handle the possibility of the variable being null.
this.createCountryForm.get('countryCode') ?? {value:''/*default Value*/}.value
or
this.createCountryForm.get('countryCode')?.value
For Detailed Explanation why formControl can be null check here
答案2
得分: 0
"Since you don't use a typed form, this this.createCountryForm.get('countryCode') (and the other too) can lead to a null object. Put a ! after it: this.createCountryForm.get('countryCode')!."
英文:
Since you don't use a typed form, this this.createCountryForm.get('countryCode') (and the other too) can lead to a null object. Put a ! after it: this.createCountryForm.get('countryCode')!.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论