在MAT-DIALOG Angular中填充表格

时间:2018-12-13 20:38:24

标签: angular dialog modal-dialog

我有一个组件,该组件具有一个触发对话框的按钮,该对话框具有用户填写的表单,然后该数据将显示在该组件中。我想通过同一对话框编辑该数据,但是我没有设法将数据传递给该对话框。

这是首先创建对话框的功能:

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()时没有运气。

感谢您的帮助!

0 个答案:

没有答案