使用反应形式在材料模态中打开单一形式数组控件

Question

我正面临一个问题，我正在建立一个学生名单（formarray）。 当单击单个表单数组控件的编辑时，我想打开材料模式来编辑这些字段并完成学生信息。 我面临的问题是，由于模态字段不是表单组的一部分，因此会出错。 我如何在该模式中使用 1 个单一控件。

<div [formGroup]="form" class="container">
    <div formArrayName="students">
        <button type="button" (click)="addStudent()"> Add </button>
        <div class="row" *ngFor="let control of students.controls; let i = index">
            <!-- All other fields -->

            <button type="button" class="close" aria-label="Close" (click)="openModal(studentModal, i)">
            close </button>
        </div>
    </div>
</div>

<ng-template #studentModal let-modal>
  <div class="modal-header">
      <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
          <span aria-hidden="true"><i class="material-icons">{{'close' | translate}}</i></span>
      </button>
  </div>
  <div class="modal-body">
      <div class="border-apply">
          <div class="m-b-20">
              <div class="contact-grid">
                <!-- Display single formarray control -->
              </div>
          </div>
      </div>
  </div>
</ng-template>

同时组件 class 是

this.form = this.fb.group({
    students: this.fb.array([])
});

get students(): FormArray {
    return this.form.get('students') as FormArray;
}

addStudent(): void {
    this.sensors.push(this.fb.group({
        studentUniqueID: new FormControl(),
        name: new FormControl(''),
        grade: new FormControl('')
      }),
    ]));
}


openModal(content, id): void {
  this.toEditStudentControl = this.students.controls[id];
  this.editIndex = id;
  this.modalService.open(content, { size: 'sm' });
}

Answer 1

你可以使用“数据”来传递formGroup

如果你有一个 .html 之类的

<form [formGroup]="form">
  <div formArrayName="students">
    <div
      *ngFor="let group of students.controls;let i=index"
      [formGroupName]="i"
    >
      <input formControlName="name" />

      <!--see you pass to openDialog, the template and the index-->
      <button mat-button (click)="openDialog(template,i)">Open dialog</button>
    </div>
  </div>
</form>

<!--see the "let-data"-->
<ng-template #template let-data>
    <form [formGroup]="data.group">
    <input formControlName="name">
</form>
<!--see that in close we return the data.group.value-->

<button mat-button [mat-dialog-close]="data.group.value" cdkFocusInitial>Ok</button>
</ng-template>

这允许您使用一些类似

/**WRONG APROACH**/
openDialog(template:any,index:number) {
    const dialogRef=this.dialog.open(template, {
      data: {
        group: this.students.at(index),
      },
    });
    dialogRef.afterClosed().subscribe(result => {
      (this.students.at(index) as FormGroup).patchValue(result)
    });
  }

看到 formArray 已经改变了，但是需要使用 patchValue 来显示输入中的数据。

好吧，实际上将formGroup 传递给其他副本并不是一个好主意。 所以，如果我们取消我们的 FormArray 不会改变

因此，我们正在更改您的 function addStudent 并拆分为 addStudent 和 createStudent

  addStudent()
  {
    this.students.push(this.createStudent());
  }
  createStudent(data: any = null): FormGroup {
    data = data || { studentUniqueID: 0, name: '', grade: '' };
    return new FormGroup({
      studentUniqueID: new FormControl(data.studentUniqueID),
      name: new FormControl(data.name),
      grade: new FormControl(data.grade),
    });
  }

现在，我们的 openDialog 变成了

  /*GOOD APPROACH**/
  openDialog(template: any, index: number) {
    const dialogRef = this.dialog.open(template, {
      data: {
        group: this.createStudent(this.students.at(index).value),
      },
    });
    dialogRef.afterClosed().subscribe((result) => {
      (this.students.at(index) as FormGroup).patchValue(result);
    });
  }

见stackblitz

重要提示：如果我们只想更改对话框中的元素，真的不需要 FormArray。 我们可以使用一个简单的对象数组

<div *ngFor="let st of studentList;let i=index">
    name:{{st.name}}<button mat-button (click)="openDialog2(template,i)">Open dialog</button>
</div>
openDialog2(template: any, index: number) {
    const dialogRef = this.dialog.open(template, {
      data: {
        group: this.createStudent(this.students.at(index).value),
      },
    });
    dialogRef.afterClosed().subscribe((result) => {
      this.studentList[index]=result;
    });
  }

Answer 2

您可以使用“数据”来传递控件或使用数据创建新控件（请参阅另一个响应中的原因）

<ng-template #template let-data>
    <input [formControl]="data.control" />
  <button mat-button [mat-dialog-close]="data.control.value" cdkFocusInitial>
    Ok
  </button>
</ng-template>

<ng-template #template let-data>
    <input [formControl]="data.control" />
  <button mat-button [mat-dialog-close]="data.control.value" cdkFocusInitial>
    Ok
  </button>
</ng-template>

.ts：

  openDialog(template: any, index: number) {
    const dialogRef = this.dialog.open(template, {
      data: {
        control: new FormControl(this.students.at(index).get('address')?.value),
      },
    });
    dialogRef.afterClosed().subscribe((result) => {
      const control=this.students.at(index).get('address');
      control && control.patchValue(result);
    });
  }

堆栈闪电战

注意：您也可以只传递一个变量并使用 ngModel

<ng-template #template2 let-data>
<input [(ngModel)]="data.value" />
<button mat-button [mat-dialog-close]="data.value" cdkFocusInitial>
Ok
</button>
</ng-template>

  openDialog2(template: any, index: number) {
    const dialogRef = this.dialog.open(template, {
      data: {
        value: this.students.at(index).get('address')?.value,
      },
    });
    dialogRef.afterClosed().subscribe((result) => {
      const control=this.students.at(index).get('address');
      control && control.patchValue(result);
    });
  }