Angular 2 中的表单提交状态标志

Question

我想显示一个表单提交标志，最终会在用户等待结果时显示为动画。

我正在使用以下功能：

  onSubmit(): void {
    console.log(JSON.stringify(this.applicationForm));
    this.formState = 'submitted';


    this.submitService.submitApplicationForm(this.applicationForm)
      .then(
      success => this.handleSubmissionResponse(success),
      failure => this.handleSubmissionResponse(failure)
      );
  }

在我的表单组件中 class 我有：

export class SendAnswers implements OnInit {

submitStatus = "We are getting your results..."
status = "submitting"

然后一个基本函数来改变上面的标签

  submitState(newStatus){
    this.submitStatus = newStatus;
    this.status = (this.status === 'submitting' ? 'We are getting your results...': 'Your results are below');
  }

状态标志：

  <div *ngIf="this.formState === 'submitted'">
      <h3>{{submitStatus}}</h3>
  </div>

如果 angular 2 中不再有 ng-init，我该如何在 ngIf 语句后调用 submitState？

Answer 1

你是问我如何在我的应用第一次加载我的组件时调用 submitState 吗？

如果是这样，那么这就是组件上 ngOnInit 生命周期方法的目的。 Angular 在初始化组件时自动调用此方法。

因此您可以在该 ngOnInit 方法中添加初始 submitState 调用。

顺便说一句，由于您的组件实现了 OnInit 接口，那么该 ngOnInit 方法应该已经存在于您的组件中。

编辑

因此假设您的组件上有 onSubmit 和 submitState 作为两个方法，您可以将 onSubmit 调整为如下内容：

onSubmit(): void { console.log(JSON.stringify(this.applicationForm)); // this.formState = 'submitted'; <--- 为什么会在这里？？？

this.submitState('submitting');

this.submitService.submitApplicationForm(this.applicationForm)
  .then(
  success => {
    this.submitState('submitted');
    this.handleSubmissionResponse(success);
  },
  failure => this.handleSubmissionResponse(failure)
  );

}

submitState(newStatus){
    this.submitStatus = newStatus;
    this.status = (this.status === 'submitting' ? 'We are getting your results...': 'Your results are below');

}

Angular 2 中的表单提交状态标志

Form submit status flag in Angular 2

form-submit

angular-ng-if

angular