在 Angular2 中提交后如何隐藏表单？

Question

我有 Angular 中的表格 2. 提交后想隐藏它并显示消息。

<div class="registration">
<form [formGroup]="registrationForm" (ngSubmit)="RegisterUser(registrationForm.value)" novalidate>
...
</form>
</div>

在 Angular 中，我使用以下代码执行此操作：

<div class="registration" ng-hide="registrationForm.$submitted" >
<form name="registrationForm" ng-submit="RegisterUser()" novalidate>
...
</form>
</div>

Answer 1

一个简单的方法是使用 *ngIf:

<div class="registration" *ngIf="showForm">
<form [formGroup]="registrationForm" (ngSubmit)="RegisterUser(registrationForm.value);showForm=false;" novalidate>
...
</form>
</div>

并在您的打字稿中初始化变量：

showForm=true

Answer 2

你的HTML

<div class="registration" [hidden]="submitted">
<form [formGroup]="registrationForm" (ngSubmit)="RegisterUser(registrationForm.value)" novalidate>
...
</form>
</div>

你的组件ts文件

RegisterUser(){
-----

submitted=true
}

Answer 3

您可以为表单声明一个模板变量并使用 ngForm 指令的 submitted 成员

<form #form="ngForm" [hidden]="form.submitted">
    ...
</form>

但如果对您来说节省内存很重要，那么这不适用于 *ngIf。

Answer 4

简单地绑定到 toggle 变量和 show/hide 按照你的要求像这样

<div class="message" *ngIf="formSubmit; else #theForm">Message here</div>
<div class="registration" #theForm>
    <form [formGroup]="registrationForm" (ngSubmit)="RegisterUser(registrationForm.value); formSubmit = !formSubmit">
    ...
    </form>
</div>

或

<ng-template *ngIf="formSubmit; then #alreadySubmitted else #theForm"></ng-template>
<div class="message" #alreadySubmitted>
    Message here
</div>
<div class="registration" #theForm>
    <form [formGroup]="registrationForm"
      (ngSubmit)="RegisterUser(registrationForm.value); formSubmit = !formSubmit">
    ...
    </form>
</div>

PS：您也可以使用 [hidden] 来切换视图。

Answer 5

<div class="registration" *ngIf="ifregistration"
<form [formGroup]="registrationForm" (ngSubmit)="RegisterUser(registrationForm.value)" novalidate>
</form>
</div>

在 Typescript 中初始化变量：

RegisterUser(f: NgForm) {
    if (f.valid) {
        var form_submitted = f.value
        this.loading = true;
        this.ifregistration = false;
    }
}

在 Angular2 中提交后如何隐藏表单？

How hide form after submit in Angular2?

forms

submit

hide

angular