如何在angular中隐藏窗体

Question

我一直试图隐藏我的表单，并使它只在用户单击按钮时显示。但是由于某些原因，我创建的函数永远不会工作。是不是我的代码出了问题？我看到了相当多使用angular.module的示例，我尝试了一下，但总是收到错误消息。

transfer.component.html

<form [formGroup]="AddRiciverForm" id="AddRiciverForm" (ngSubmit)="addRiciverFunc()" *ngIf="show">
  <div class="container">
    <div class="row">
      <div class="col-sm-6 col-sm-offset-3">
        <p><input type="email" id="emailTo" formControlName="emailTo"  placeholder="Reciver Email" [(ngModel)]="this.AddRiciverForm.value.emailTo" required></p>
      </div>  
    </div>
     <div class="row">
      <div class="col-sm-6 col-sm-offset-3">
        <p><button class="btn btn-primary" type="submit" [disabled]="!transferForm.form.valid">Add</button> </p>    
      </div>
    </div>
   </div>
  </form>
<button ng-click="AddEmailFunc()">add user</button>

transfer.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
import { Http } from '@angular/http';
import { PostsService } from '../posts.service';

@Component({
  selector: 'app-transfer',
  templateUrl: './transfer.component.html',
  styleUrls: ['./transfer.component.css']
})
export class TransferComponent implements OnInit {

  constructor(private fb: FormBuilder, private http: Http, private router: Router, private auth: AuthService,private postsService: PostsService) { }
  transfer = {};
  addRiciver = {};
  recivers: any;
  AddRiciverForm: FormGroup;
  transferForm: FormGroup;
  public userEmail: string;
  show=false;
  ngOnInit() {
    this.transferForm = this.fb.group({
      emailTo: '',
      amount: ''
    });
    this.AddRiciverForm = this.fb.group({
      emailTo: ''
    });
    this.auth.currentEmail.subscribe(email => this.userEmail = email);

    this.postsService.getAllReciver().subscribe(reciver => {
      this.recivers = reciver;
    });
  }
  transFunds(){

  }
  addRiciverFunc(){    
        this.addRiciver={
          emailFrom: this.userEmail,
          emailTo: this.AddRiciverForm.value.emailTo
        }
        this.http.post('/transfer', this.addRiciver)
        .subscribe(res => {
            let id = res['_id'];

          }, (err) => {
            console.log(err);
          }
        );


  }

  AddEmailFunc(){
  if(!this.show){
    this.show = true;
  }

  }
}

Answer 1

您必须尝试在表单上添加[hidden]="AddEmailFunc()"。

请参阅我的示例代码

import { Component } from '@angular/core';

@Component({
    selector: 'Sandbox',
    template: `<form [hidden]="isDisplayed">
    <label>Sample: </label>
    <input type="text">
    </form>

    <button (click)="showMe()">Click</button>`
})

export class SandboxComponent{
    isDisplayed = true;

    showMe()
    {
        if(this.isDisplayed)
        {
            this.isDisplayed = false;
        }else{
            this.isDisplayed = true;
        }
    }
}

希望能有所帮助。:)干杯！

Answer 2

你混合了angularjs (1.x)和angular (>2)

Angular中的ng-click应为：

<button (click)="AddEmailFunc()">add user</button>

如果这不能解决您的问题，请张贴完整的组件。

Answer 3

您可以在按钮的事件单击中使用*ngIf和(model)绑定。

<button (click)="changeView()">add user</button>

和clickEvent

changeView(){
   this.showForm = !this.showForm;
}