如何从另一个组成角4提交表单? [英] How to submit a form from another component angular 4?
问题描述
我遇到了困难,我希望得到你的帮助。
I am stuck at something and I want your help.
我想提交另一个组件中的表单,并且提交按钮位于另一个组件中。
I want to submit a form which is in another component and submit button is in another component.
如何在角度4中实现?
这是我的代码的html。
This is my code's html.
其表格为html
<form class="form form-validate" ngNativeValidate
(submit)="editInformationFunction($event)"
#editForm="ngForm">
<div class="row px-3 pb-3">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 ">
<!---------------Panel1 ------------------->
<div class="panel panel-primary radius">
<div class="panel-heading border-bottom p-2">
<h3 class="panel-title m-0"><i class="fa fa-user green pl-3">
</i> <span
class="ml-2 font-weight-bold">PERSONAL INFORMATION</span> .
</h3>
<span class="pull-right "><i class="glyphicon glyphicon-
chevron-down"> </i></span>
</div>
<div class="panel-body">
<div class="row">
<!--input fields-->
<div class="col-xs-12 col-sm-12 col-md-12 col-md-6 col-lg-6
">
<div class="form-group mt-4 ml-4">
<label for="name"><b>NAME<span class="text-danger ml-2">*
</span> </b></label>
<input id="name" type="text" class="form-control"
[(ngModel)]="editInformationModel.name"
[ngModelOptions]="{standalone: true}" required>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-md-6 col-lg-6
">
<div class="form-group mt-4 mr-4">
<label for="info"><b>BIRTH DATE
</b></label>
<input id="info" type="text" class="form-control"
[(ngModel)]="editInformationModel.birthdate ?
editInformationModel.birthdate : N/A "
[ngModelOptions]="{standalone: true}" required>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="form-group form-check-inline mt-1 ml-4">
<b>GENDER<span class="text-danger ml-2">*</span></b>
<div class="form-check-inline d-flex mt-1">
<label class="customradio"><span class="radiotextsty">
<b>Male</b></span>
<input type="radio" checked="checked" name="radio"
[(ngModel)]="editInformationModel.sex"
[ngModelOptions]="{standalone: true}"
value="m">
<span class="checkmark"> </span>
</label>
<label class="customradio ml-2"><span
class="radiotextsty"><b>Female</b></span>
<input type="radio" name="radio"
[(ngModel)]="editInformationModel.sex"
[ngModelOptions]="{standalone: true}"
value="f">
<span class="checkmark"> </span>
</label>
</div>
</div>
</div>
</form>
其表格.ts文件
@Component({
selector: 'app-edit-information',
styleUrls: ['./edit-information.component.css'],
templateUrl: './edit-information.component.html'
})
export class EditInformationComponent implements OnInit {
editInformationFunction(e) {
console.log(this.editInformationModel);
this.editInformationService.editMemberInformation
(this.editInformationModel).subscribe(
response => {
console.log(response);
this.spinner.hide();
if (response ['error'] == false) {
console.log(response);
this.toastr.success(response['data'],
this.editInformationData.toastTitle.success);
} else {
this.spinner.hide();
this.toastr.error(response['message'],
this.editInformationData.toastTitle.error);
}
},
err => {
this.spinner.hide();
this.toastr.error(err.error['message'],
this.editInformationData.serverError);
}
)
}
}
我的侧边栏html,我想提交表格....
its my sidebar html from where i want to submit my form....
<div class="d-flex" [hidden]="saveInformation">
<button type="submit" class="btn btn-success btn-sm py-2 border-0"><i
class="fa fa-save"> </i>
Save
Information
</button>
<button class="btn btn-default btn-sm text-white ml-2 py-2"
routerLink="/household-information">
Cancel
</button>
</div>
其侧边栏的.ts文件
@Component({
selector: 'app-sidebar',
styleUrls: ['./sidebar.component.css'],
templateUrl: './sidebar.component.html'
})
export class SidebarComponent implements OnInit {}
推荐答案
如果你的组件正在使用@Input,并在引用变量中传递组件。
,例如
你app.component就像
If your components are at time the easer way is using @Input and pass your component in a reference variable. e.g. You app.component is like
<hello #hello name="{{ name }}"></hello>
<nav-bar [component]="hello"></nav-bar>
//您的导航栏就像
@Component({
selector: 'nav-bar',
template: `<button (click)="click()">click me</button>`,
styles: [`h1 { font-family: Lato; }`]
})
export class NavBarComponent {
@Input()component:any
click()
{
console.log(this.component.variable)
}
}
clasic是使用服务。您的服务可以是
The "clasic" is use a service. Your service can be like
@Injectable()
export class DataService {
private mySubjectSource = new Subject<any>();
myObservable=this.mySubjectSource.asObservable();
constructor(){}
sendValue(value:any)
{
this.mySubjectSource.next(value);
}
}
然后您的组件使用此服务:
Then your component use this service:
发出值的组件
export class NavBarComponent {
constructor(private service:DataService){}
click2()
{
this.service.sendValue("save data")
}
}
接收活动的组件
export class HelloComponent implements OnInit {
constructor(private service:DataService){ }
ngOnInit()
{
this.service.myObservable.subscribe(res=>{
console.log(res);
})
}
}
此stackblitz 我把两种方式放在
选择要提交的位置:在导航中获取表单的值,或者在发出表单时在表单中事件来自导航 -
Choose where you want to make the submit: In you nav getting the value of the form, or in the form when you emit a event from the nav-
这篇关于如何从另一个组成角4提交表单?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!