I have been trying to hide my form and making it appear only when user click on the button. but for some reason, the function I have created never work is there something wrong with my code? and I saw quite a few example that uses angular.module and I tried it but I always get an error message.

transferponent.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>

transferponent.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: './transferponent.html',
  styleUrls: ['./transferponent.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;
  }

  }
}

I have been trying to hide my form and making it appear only when user click on the button. but for some reason, the function I have created never work is there something wrong with my code? and I saw quite a few example that uses angular.module and I tried it but I always get an error message.

transfer.ponent.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.ponent.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.ponent.html',
  styleUrls: ['./transfer.ponent.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;
  }

  }
}

• javascript
• html
• angular

3 Answers 3

You must try adding [hidden]="AddEmailFunc()" on your form.

please see my sample code

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

Hope it helps. :) cheers!

You are mixing angularjs (1.x) and angular (>2)

the ng-click in Angular should be:

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

If this does not solve your issue please post the full ponent.

you can use *ngIf in and (model) binded to event click of button.

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

and clickEvent

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