我有一个用angular4编写的代码,我希望表单只在按钮点击时显示,即点击"注册"按钮。但是,出现了问题。按钮和表格都会出现。我正在通过模型驱动的表单方法制作表单。我有三个文件app.component.js,app.module.js和app.component.html .please help。
代码是: 的 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 { }
答案 0 :(得分:1)
问题出在这里
<div [hidden]="!onClickOpenForm()">...
而应该绑定为:
<div [hidden]="!openform">...
它应该与
一起使用onClickOpenForm(){
this.openform=true;
}
答案 1 :(得分:0)
这可以归结为这样一个事实:在你的模板中,你有
[hidden]="!onClickOpenForm()"
和onClickOpenForm()不跟踪是否应该显示表单的状态,它将openform成员设置为true,并返回它,即它始终返回true:
onClickOpenForm(){
this.openform=true;
return this.openform;
}
您可能应该用[
]替换[hidden]绑定[隐藏] =&#34;!的OpenForm&#34;
或者可能使用以下内容包围您的表单:
<div *ngIf="openform">
<!-- your form here -->
</div>