要使表单显示在按钮上，请单击 Angular4

Question

>我有一个用 angular4 编写的代码，我希望表单仅在单击按钮时出现，即单击"注册"按钮时。但是，出现了一个问题。 按钮和窗体都显示 。我正在通过模型驱动的表单方法制作表单。我有三个文件app.component.js，app.module.js和app.component.html.请帮忙。

代码是：app.component.ts

 import { Component } from '@angular/core';
 import {MyserviceService} from './servicecomponent/myservice.service'
 import 'rxjs/add/operator/map';
 import { Http } from '@angular/http';
 import { FormGroup, FormControl } from '@angular/forms';
  import { Validators } from '@angular/forms';

   @Component({
  selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
   })

  export class AppComponent {
 title = 'Angular 4 Project!';
  todaydate;
  componentproperty;
   searchparam = 2;
 name;
 email;
 age;
 lastname;
 mobilenumber;
 aadhaarnumber;
 formdata2 ;
 openform=false;

 constructor(private myservice: MyserviceService,private http: Http) 
   {}
  ngOnInit() {
  this.todaydate = this.myservice.showTodayDate();
  console.log("date is",this.todaydate);
  console.log(this.myservice.serviceproperty);
  this.myservice.serviceproperty = "component created"; // value is 
   changed.
  this.componentproperty = this.myservice.serviceproperty;
  this.http.get("http://jsonplaceholder.typicode.com/users").
  map((response) => response.json()).
  subscribe((data) => console.log(data));


    this.formdata2 = new FormGroup({
  email: new FormControl("", Validators.compose([
   Validators.required,
   Validators.pattern("[^ @]*@[^ @]*")
 ])),
  name:new FormControl("",Validators.compose([
  Validators.required,
  Validators.pattern("[a-z]{1,8}")
  ])),
  lastname:new FormControl("",Validators.compose([
  Validators.required,
  Validators.pattern("[a-z]{1,4}")
  ])),
  age:new FormControl("",Validators.compose([
  Validators.required,
  Validators.pattern("[0-9]{2}")
  ])),
  mobilenumber:new FormControl("",Validators.compose([
  Validators.required,
  Validators.pattern("[0-9]{10}")
  ])),
  aadhaarnumber:new FormControl("",Validators.compose([
  Validators.required,
  Validators.pattern("[0-9]{12}")
  ]))
  });
  }
 onClickOpenForm(){
  this.openform=true;
  return this.openform;
  }

 onClickSubmitForm(data2){
 this.email=data2.email;
 this.age=data2.age;
 this.mobilenumber=data2.mobilenumber;
 this.aadhaarnumber=data2.aadhaarnumber;
 this.name=data2.name;
 this.lastname=data2.lastname;

    }
}

app.component.html

 <div>
  <button (click)="onClickOpenForm()" 
 value="Register">Register</button>
  </div>
  <div [hidden]="!onClickOpenForm()">
  <form [formGroup]="formdata2" 
  (ngSubmit)="onClickSubmitForm(formdata2.value)">
    Name:
    <input type="text" class="yourtextbox" name="yourname" 
  placeholder="Your Name" formControlName="name">
    <br> LastName:
    <input type="text" class="yourtextbox" name="yourlastname" 
 placeholder="Your Last Name" formControlName="lastname">
    <br> Age:
    <input type="text" class="yourtextbox" name="yourage" 
 placeholder="Your Age" formControlName="age">
    <br> Email:
    <input type="text" class="yourtextbox" name="youremail" 
 placeholder="Your Email" formControlName="email">
    <br> Mobile Number:
    <input type="text" class="yourtextbox" name="yourmobile" 
 placeholder="Your Mobile Number" formControlName="mobilenumber">
    <br> Aadhaar Number:
    <input type="text" class="yourtextbox" name="youraadhaar" 
 placeholder="Your Aadhar Number" formControlName="aadhaarnumber">
    <br>
    <input type="submit" [disabled]="!formdata2.valid" type="button" 
class="btn btn-success" class="forsubmit" value="Submit">
</form>
</div>
<br>
<br>
<p>
Name is :{{name}} Lastname is:{{lastname}}
</p>

app.module.ts

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { AppComponent } from './app.component';
 import { NewComponentComponent } from './new-component/new- 
  component.component';
 import { CateinaComponent } from './cateina-new-component/cateina- 
 new-component.component';
 import { MyserviceService } from 
 './servicecomponent/myservice.service';
 import { ReactiveFormsModule } from '@angular/forms';

  @NgModule({
    declarations: [
    AppComponent,
    NewComponentComponent,
    CateinaComponent,
   AppComponent,
   ],
  imports: [
  BrowserModule,
  HttpModule,
  ReactiveFormsModule,
  RouterModule.forRoot([
  {
    path: 'new-cmp',
    component: NewComponentComponent
  },
  {
    path: 'cateina-cmp',
    component: CateinaComponent
  },
  ])
  ],
 providers: [MyserviceService],
 bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

这归结为这样一个事实：在您的模板中，您有

[hidden]="!onClickOpenForm()"

onClickOpenForm(( 不跟踪表单是否应该显示的状态，它将你的 openform 成员设置为 true，并返回它，即它总是返回 true：

 onClickOpenForm(){
  this.openform=true;
  return this.openform;
  }

您可能应该将 [隐藏] 绑定替换为：

[隐藏]="！openform">

或者可能用以下内容包围您的表单：

<div *ngIf="openform">
  <!-- your form here -->
</div>

Answer 2

问题就在这里

<div [hidden]="!onClickOpenForm()">...

相反，您应该绑定为：

<div [hidden]="!openform">...

它应该适用于

onClickOpenForm(){
  this.openform=true;  
  }