[英]How to return data that user inputs?
I recently learned Angular2. 我最近学习了Angular2。 Currently, I have got a material modal after some searching.
目前,经过一些搜索,我得到了一个材料模态。 However,I can't find how I return the data that the user can input.
但是,我找不到如何返回用户可以输入的数据。
In the modal I currently have, there is one input field and one checkbox. 在我目前拥有的模式中,有一个输入字段和一个复选框。 When close the console logs "de dialog closed" and "true".
关闭时,控制台会记录“关闭对话框”和“ true”。
This is my modal HTML: 这是我的模式HTML:
<h2 mat-dialog-title>Add Group</h2>
<mat-dialog-content>
<div>
<mat-form-field>
<input matInput placeholder="Groupname">
</mat-form-field>
<mat-form-field>
<mat-checkbox >Private group?</mat-checkbox>
</mat-form-field>
<mat-form-field>
<button mat-raised-button color="primary">img</button>
</mat-form-field>
</div>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-button mat-dialog-close>cancel</button>
<!-- The mat-dialog-close directive optionally accepts a value as a result for the dialog. -->
<button mat-button [mat-dialog-close]="true" >save</button>
</mat-dialog-actions>
TS code: TS代码:
import { Component, OnInit, Inject } from '@angular/core';
import { GroupsService} from '../../../services/Groups.service';
import { Groups } from '../../../models/groupModel'
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
@Component({
selector: 'app-groups',
templateUrl: './groups.component.html',
styleUrls: ['./groups.component.scss'],
})
export class GroupsComponent implements OnInit {
animal: string;
name: string;
groups: Groups[];
constructor(
private groupsService: GroupsService,
public dialog: MatDialog
){}
ngOnInit() {
this.groupsService.getMyGroups()
.then(group =>{
this.groups = group;
console.log(this.groups)
}).catch(error=>{
console.log(error);
});
}
openDialog(): void {
let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
height: '300px',
width: '300px',
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
console.log(result);
this.animal = result;
});
}
testgroup(id){
console.log(id)
}
acceptGroup(){
console.log('accept')
}
declineGroup(){
console.log('decline');
}
createGroup(){
console.log("sample");
}
}
@Component({
selector: 'dialog-overview-example-dialog',
templateUrl: './model.html',
})
export class DialogOverviewExampleDialog {
constructor(
public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
@Inject(MAT_DIALOG_DATA) public data: any) { }
onNoClick(): void {
this.dialogRef.close();
}
}
This part of your code inside HTML template is currently responsible for what you're passing back from the model: [mat-dialog-close]="true"
. HTML模板中的代码的这一部分目前负责您从模型传回的内容:
[mat-dialog-close]="true"
。 As you see you're just passing true
and nothing else. 如您所见,您只是在传递
true
,没有别的。 Simplest way to achieve what you want is to create form inside the dialog and pass its value. 实现所需功能的最简单方法是在对话框内创建表单并传递其值。
<h2 mat-dialog-title>Add Group</h2>
<mat-dialog-content>
<form #modalForm="ngForm">
<div>
<mat-form-field>
<input matInput name="groupName" placeholder="Groupname" ngModel>
</mat-form-field>
<mat-form-field>
<mat-checkbox name="privateGroup" ngModel>Private group?</mat-checkbox>
</mat-form-field>
<mat-form-field>
<button mat-raised-button color="primary">img</button>
</mat-form-field>
</div>
</form>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-button mat-dialog-close>cancel</button>
<button mat-button [mat-dialog-close]="modalForm.value">save</button>
</mat-dialog-actions>
You can also pass form value on submit (using (ngSubmit)="mySubmitFunction(modalForm.value)"
on form tag ) to the mySubmitFunction
defined in DialogOverviewExampleDialog
. 您还可以将提交时的表单值(在表单标签上使用
(ngSubmit)="mySubmitFunction(modalForm.value)"
)传递给DialogOverviewExampleDialog
定义的mySubmitFunction
。 And then, after some kind of validation for example, pass data by using: this.dialogRef.close(someVariableContainingValues)
. 然后,例如,在进行某种形式的验证之后,使用以下
this.dialogRef.close(someVariableContainingValues)
传递数据: this.dialogRef.close(someVariableContainingValues)
。
use this code i think it will be work: 使用此代码,我认为这将是可行的:
dialogRef.afterClosed().subscribe(result => { console.log('The dialog was closed'); console.log(result); //this.animal = result; }).()=>{ this.animal = result; };
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.