Javascript 第九版-团体发行

免责声明：一般来说，我对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);
        });
  }

  onClose() {
    this.showModal = false;
    // Allow fade out animation to play before navigating back
    setTimeout(
      () => this.router.navigate(['..']),
      100
    );
  }

  onDialogClick(event: UIEvent) {
    // Capture click on dialog and prevent it from bubbling to the modal background.
    event.stopPropagation();
    event.cancelBubble = true;
  }
}

这是当前的HTML：

<div id="backdrop" class="modal-backdrop fade" [ngClass]="{ show: showModal }"></div>
<div class="modal d-block fade"
     [ngClass]="{ show: showModal }"
     (click)="onClose()"
     id="listing-dialog"
     tabindex="-1" role="dialog" aria-labelledby="modalIdLabel">
  <nz-modal class="modal" [nzWidth]="600" [(nzVisible)]="showModal" nzTitle="NETCOT Account Activation" [nzFooter]="modalFooter">

    <nz-alert *ngIf="success" class="alert" nzType="success" nzMessage="{{success}}"></nz-alert>
    <nz-alert *ngIf="error" class="alert" nzType="error" nzMessage="{{error}}"></nz-alert>

  <form nz-form [formGroup]="validateForm" (ngSubmit)="handleActivation(null)">
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="CODE">Activation Code</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="The input is not valid activation code!">
        <!--<input *ngIf="isConfirmLoading" disabled nz-input [value]="activationCode" formControlName="CODE" id="CODE"/>-->
        <input  nz-input formControlName="CODE" id="CODE"/>
      </nz-form-control>
    </nz-form-item>
  </form>
  <ng-template #modalFooter>
    <button class="button" nz-button nzType="primary" (click)="handleActivation(null)" [nzLoading]="isConfirmLoading">Activate</button>
  </ng-template>
  </nz-modal>
</div>

激活码
激活

在这里，构造函数中的代码在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);
      }
    });
  }

---

在这里，构造函数中的代码是在执行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);
      }
    });
  }