Что за ошибка при создании переменной типа FormGroup?

Question

[Alex10214]

Всем привет, есть такой код:

import { Component, OnInit } from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'app-login-page',
  templateUrl: './login-page.component.html',
  styleUrls: ['./login-page.component.scss']
})
export class LoginPageComponent implements OnInit {

   loginForm: FormGroup;
 

  constructor(
  ) { }

  ngOnInit(): void {
   
    this.loginForm = new FormGroup({
      email: new FormControl('', [Validators.required , Validators.email]),
      password: new FormControl('', [Validators.required , Validators.minLength(4)]),
    });
  }

  onLogin(): void {
   
    }
    
  }

В нем переменная "loginForm" подсвечивается красным и выпадает такая ошибка:
"Property 'loginForm' has no initializer and is not definitely assigned in the constructor."
Подскажите что я делаю не так?? И что это вообще за ошибка?

"loginForm: FormGroup | undefined;" - решает проблему, но если создаю новые переменные, то возникает та же ошибка. Не понимаю с чем это связано(

Comments

[Sun_Day]

tsconfig и версию тайпскрипта в студию.

Answer 1

[Евгений Акулинин]

Нужно переместить код инициализации формы в constructor()

constructor() {
    this.loginForm = new FormGroup({
      email: new FormControl('', [Validators.required , Validators.email]),
      password: new FormControl('', [Validators.required , Validators.minLength(4)]),
    });
  }

Typescript проверяет, чтобы все свойства были инициализированы в конструкторе. Чтобы отключить эту проверку надо установить strictPropertyInitialization=false в tsconfig.json

Comments

[Евгений Акулинин]

Ссылка на доки тайпскрипта https://www.typescriptlang.org/docs/handbook/relea...

[Alex10214]

Евгений Акулинин, если я создаю другие переменные разных типов, то у меня выпадает та же ошибка. Это значит, что мне все переменные нужно в конструктор пихать??

[Sun_Day]

Alex10214, тебя попросили tsconfig показать и дать версию тайпскрипта. Даже ответ написали strictPropertyInitialization=false в tsconfig.json

В чем проблема?

[Евгений Акулинин]

Alex10214, все переменные в конструктор. Или выключай strictPropertyInitialization.

[Alex10214]

Извините, я не вижу где меня просили показать ts.config.

"compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  }
}
Вот все что у меня сейчас в tsconfige.

[Sun_Day]

Alex10214,

"compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "strictPropertyInitialization": false,
    "lib": [
      "es2018",
      "dom"
    ]
  }

Пробуй

[Евгений Акулинин]

Alex10214, я приложил ссылку не документацию. В ней написано: You can set the strictPropertyInitialization setting to false in your tsconfig.json’s compilerOptions. Т.о. надо добавить "strictPropertyInitialization": false в секцию compilerOptions

[Alex10214]

Спасибо большое! Извините, за тупость)

[G F]

не обязательно в конструкторе, можно просто дефолтное значение задавать при объявлении

Answer 2

[NarkoMan01]

Попробуйте так

loginForm: FormGroup;
 constructor(
  ) { 
this.loginForm = 'some value'; // Некторое значение
}
ngOnInit(): void {
   
    this.loginForm = new FormGroup({
      email: new FormControl('', [Validators.required , Validators.email]),
      password: new FormControl('', [Validators.required , Validators.minLength(4)]),
    });
  }

Comments

[Alex10214]

не помогло

[NarkoMan01]

а что вы ввели в конструкторе?
Какая ошибка вышла?

[Alex10214]

constructor(
  ) { 
this.loginForm = 'some value';
}

В этом случае выпадает: "Type 'string' is not assignable to type 'FormGroup'." Ругается на разные типы. Если присваиваю тип "any", то выпадает такая ошибка "Property 'loginForm' is used before being assigned". Но и если у меня в файле будут еще 20 переменных, то мне их тоже нужно заносить в конструктор? Не понятно как-то..

Answer 3

[Александр]

Альтернативно можно указать, что loginForm может быть undefined

export class LoginPageComponent implements OnInit {

   loginForm: FormGroup | undefined; // краткая запись loginForm?: FormGroup;
 
  ngOnInit(): void {
   
    this.loginForm = new FormGroup({
      email: new FormControl('', [Validators.required , Validators.email]),
      password: new FormControl('', [Validators.required , Validators.minLength(4)]),
    });
  }