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

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

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

但如果在您的情况下节省内存非常重要，那么这对*ngIf无效。

Answer 2

一种简单的方法是使用*ngIf：

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

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

showForm=true

Answer 3

您的HTML

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

您的组件ts文件

RegisterUser(){
-----

submitted=true
}

Answer 4

只需绑定到toggle变量并根据您的要求显示/隐藏

<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

'use strict';

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { assetExts }
  } = await getDefaultConfig();

  return {
    resolver: {
      assetExts: [...assetExts, "obj", "mtl", "JPG", "vrx", "hdr", "gltf", "glb", "GLB", "bin", "arobject", "gif"]
    }
  };
})();

在Typescript中初始化变量：

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

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

5 个答案: