使表单出现在按钮上单击 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;


    }

}

应用程序组件.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

问题就在这里

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

相反，您应该绑定为：

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

它应该与

onClickOpenForm(){
  this.openform=true;  
  }

Answer 2

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

[hidden]="!onClickOpenForm()"

并且 onClickOpenForm() 不跟踪是否应显示表单的状态，它将您的 openform 成员设置为 true，并返回它，即它始终返回 true：

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

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

[隐藏]="!openform"

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

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