我有一个组件,该组件具有一个触发对话框的按钮,该对话框具有用户填写的表单,然后该数据将显示在该组件中。我想通过同一对话框编辑该数据,但是我没有设法将数据传递给该对话框。
这是首先创建对话框的功能:
addSubtask(task) {
this.subtaskID = task._id;
const dialogConfig = new MatDialogConfig();
dialogConfig.data = {
subtaskID: this.subtaskID,
description: this.subtaskDescription,
dueDate: this.subtaskDuedate,
};
const dialogSubTaskRef = this.dialog.open(AddNewSubtaskDialog, dialogConfig);
dialogSubTaskRef.afterClosed().subscribe(data => {
console.log("Subtask Dialog output:", data);
});
}
在对话框组件中,我有:
export class AddNewSubtaskDialog implements OnInit {
@ViewChild(MatButton) submitButton: MatButton;
addSubtaskForm: FormGroup;
constructor(
private fb: FormBuilder,
private http: HttpClient,
public dialogRef: MatDialogRef<AddNewSubtaskDialog>,
@Inject(MAT_DIALOG_DATA) public data: AddSubTaskDialogData) {
this.idRec = data.subtaskID;
}
ngOnInit() {
this.addSubtaskForm = new FormGroup({
subtaskDescription: new FormControl('', Validators.required),
subtaskDueDate: new FormControl(new Date()),
});
}
addSubtask() {
this.dialogRef.close(this.addSubtaskForm.value);
const subtaskData = this.addSubtaskForm.value;
this.submitButton.disabled = true;
let options = {
headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
};
let body = new URLSearchParams();
body.set('description', subtaskData.subtaskDescription);
body.set('dueDate', subtaskData.subtaskDueDate);
this.http.post<any>(`${this.apiurl}`, body.toString(), options)
.subscribe(
success => {
console.log(success);
},
error => {
console.log('Error!!!');
}
);
}
}
我尝试使用setValue()
时没有运气。
感谢您的帮助!