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);
        });
  }

  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>

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);
      }
    });
  }

Angular 9 - 表单组问题

Angular 9 - Form Group Issue

javascript

typescript

form-control

angular

formgroups