Angular 9 - 表单组问题

Question

免责声明： 一般来说，我是 Angular 和 TS 的新手。

我想要完成的是一个激活组件，如果它在 URL 参数查询中，它要么直接向服务提交代码。如果没有，用户可以将代码插入表单并以这种方式将其提交给服务。

当 URL 查询中有代码时该字段被禁用，没有时启用，因此工作正常。我遇到的问题与提交服务有关。

我收到以下错误；

ERROR TypeError: Cannot read property 'get' of undefined
at ActivationComponent.handleActivation (activation.component.ts:48)

在第 48 行，我this.validateform.value过去曾导致同样的错误。

我已经搞砸了这么长时间，尝试了不同的方法，但我有点迷路了……

这是 component.ts：

import {Component, Input, Output, EventEmitter, AfterViewInit, OnInit} from '@angular/core';

import {ActivatedRoute, Router} from '@angular/router';

import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';

import {AuthService} from '../auth/auth.service';

@Component({

  selector: 'app-activation',

  templateUrl: './activation.component.html',

  styleUrls: ['./activation.component.scss']

})

export class ActivationComponent implements OnInit {

  validateForm!: FormGroup;

  showModal = false;

  isConfirmLoading = false;

  activationCode: string;

  error: string;

  success: string;

  constructor(private router: Router,

              private fb: FormBuilder,

              private activatedRoute: ActivatedRoute,

              private authService: AuthService) {

    this.activatedRoute.queryParams.subscribe(params => {

      const code = params.code;

      if (code){

        this.isConfirmLoading = true;

        this.handleActivation(code);

      }

    });

  }

  ngOnInit() {

    this.showModal = true;

    this.validateForm = new FormGroup({

      CODE: new FormControl({value: this.activationCode, disabled: this.isConfirmLoading}, Validators.required)

    });

  }

  handleActivation(code){

    this.error = null;

    this.activationCode = code;

    if (code === null){

      if (!this.validateForm.valid) {

        console.log('Invalid Form');

        return;

      }

    }

    this.authService.activate(this.validateForm.get('CODE'))

      .subscribe(data => {

        console.log('SUCCESS!');

        console.log(data);

      },

        error => {

        console.log('ERROR!');

        console.log(error);

        });

  }

Answer 1

在这里，构造函数中的代码在执行 ngOnInit() 方法之前执行，因此没有初始化表单，您正在尝试使用该表单。因此，只需更改您的订阅位置，如下所示。这肯定会解决您的问题。     constructor(private router: Router,              private fb: FormBuilder,              private activatedRoute: ActivatedRoute,              private authService: AuthService) {     }  ngOnInit() {    this.showModal = true;    this.validateForm = new FormGroup({      CODE: new FormControl({value: this.activationCode, disabled: this.isConfirmLoading}, Validators.required)    }); this.activatedRoute.queryParams.subscribe(params => {      const code = params.code;      if (code){        this.isConfirmLoading = true;        this.handleActivation(code);      }    });  }