如何以角度隐藏表单

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

希望能帮助到你。:) 干杯！