Angular에서 FormArray 및 모달 상자를 사용하는 방법에 대한 간략한 분석

FormArray와 모달박스를 함께 사용하는 방법은 무엇입니까? 다음 글에서는 Angular의 FormArray와 모달박스를 함께 사용하는 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!

비즈니스 시나리오

FormArray를 사용하여 동적 양식을 만듭니다. 양식이 생성될 때마다 페이지에 새 입력이 추가되어 양식 제목을 표시하고 편집을 클릭하여 양식의 채우기 내용을 클릭합니다. [관련 튜토리얼 추천: "angular tutorial"]

    // 封装获取modelList
    get modelList() {
        return this.formGroup.get('modelList') as FormArray
    }
    constructor(private fb: FormBuilder) {}
    ngOnInit() {
        // 一开始初始化arr为空数组
        this.formGroup = this.fb.group({
            // 内部嵌套FormControl、FormArray、FormGroup
            modelList: this.fb.array([])
        })
    }
    // 模态框构造内部的表单
    function newModel() {
        return this.fb.group({
            modelName: [''],
            // 可以继续嵌套下去，根据业务需求
        })
    }
    // 省略模态框部分代码
    // 传递到模态框的FormArray
    selectedType: FormArray

양식 목록

양식 세부 정보 [모달 상자]

<form [FormGroup]="formGroup">
    <div FormArrayName="modelList">
        <ng-container *nfFor="let item of modelList.controls;let i = index" [FormGroupName]="i">
            <nz-input-group
                [nzSuffix]="suffixIconSearch"
              >
                <input type="text" nz-input formControlName="modelName"/>
              </nz-input-group>
              <ng-template #suffixIconSearch>
                <span
                  nz-icon
                  nzType="edit"
                  class="hover"
                  (click)="showModal(i)"
                ></span>
              </ng-template>
        </ng-container>
    </div>
</form>
<nz-modal
  [(nzVisible)]="isVisible"
  nzTitle="Model"
  [nzFooter]="modalFooter"
  (nzOnCancel)="handleCancel()"
  (nzOnOk)="handleOk()"
>
  <ng-container *nzModalContent>
    <form nz-form [formGroup]="selectedType">
      <nz-form-item>
        <nz-form-label nzRequired>Model Test</nz-form-label>
        <nz-form-control>
          <input
            type="text"
            nz-input
            placeholder="请输入ModelName"
            formControlName="modelName"
          />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <product-config></product-config>
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-container>
  <ng-template #modalFooter>
    <button *ngIf="!isNewModel" nzDanger nz-button nzType="default" (click)="handleDelete()">删除</button>
    <button *ngIf="isNewModel" nz-button nzType="default" (click)="handleCancel()">取消</button>
    <button nz-button nzType="primary" (click)="handleOk()">保存</button>
  </ng-template>
</nz-modal>

이 모달 상자는 특별하고 분할되어 있기 때문에 양식의 FormGroup을 클릭하면 값의 일부를 표시하기 위해 모달 상자에 매개변수를 전달해야 합니다. 할당을 수정하고 모달 상자에서 저장을 클릭하면 수정된 값이 양식에 업데이트되지 않으며 양식에서 입력 값을 수정하면 모달 상자의 내용에 영향을 미칩니다. this.modelList.at(index)获取实体到模态框上进行赋值修改，在模态框点击保存后会发现修改的值没有在表单更新，而表单上对input值修改发现可以影响到模态框的内容。

但是模态框新增的表单却可以响应到页面中去。

原错误代码思路

• 点击编辑后，将点击的FormArray的元素传递给一个临时变量 this.selectedType = <FormGroup>this.modelList.at(index);

  단, 모달박스에 추가된 양식을 페이지에 응답할 수 있습니다.

원래 오류 코드 아이디어

---

편집을 클릭한 후 클릭한 FormArray 요소를 임시 변수 this.selectedType = <FormGroup>this .modelList에 전달합니다. .at(index);, 값을 모달 상자 양식에 전달합니다.

• 모달 상자에서 저장을 클릭하고 원본 FormArray의 값을 바꿉니다

• this.modelList.removeAt(this.modelIndex)
  this.modelList.insert(this.modelIndex, this.selectedType)

추가를 클릭하여 새 FormGroup 객체를 만듭니다

저장하고 원본 페이지의 FormArray에 푸시를 추가합니다

newModelType(): FormGroup {
    return this.fb.group({
      modelName: ['', Validators.required],
      configList: this.fb.array([]),
    });
  }
// ...省略
// 模态框显示
show() {
    this.isVisible = true
    this.selectedType = this.newModelType();
}
// 保存
save() {
    this.isVisible = false
    // 原页面FormArray
    this.modelList.push(this.selectedType);
}

드디어 이 쓰기 방법은 한 방향으로만 바뀔 수 있다는 것을 알게 되었습니다. 페이지 외부에서 입력 값을 수정하면 모달 상자에 영향을 주는데, 모달 상자의 값은 변경되어 저장되지만 외부는 입니다. 업데이트되지 않았습니다. 해당 페이지의 FormArray 내부 파라미터를 콘솔 방식으로 확인해보니 실제로 변경 사항이 있는 것으로 나타났으나 Angular에서는 이를 감지하지 못했습니다. 이때 응답이 없는 이유는 일반적으로 각도 감지 메커니즘이 작동되지 않기 때문으로 판단됩니다. 문서를 주의 깊게 확인한 결과 하단에 매우 중요한 라인

angular document이 적혀 있는 것을 발견했습니다

처음 읽었을 때 준수한 느낌이 들었습니다. 편집할 때 원본 FormArray를 조작하여 요소를 삭제하고 삽입하기로 선택했기 때문입니다. 하지만 실제로는 값을 할당합니다. 모달 상자에 값을 할당할 때 FormArray의 요소 인스턴스를 가져와서 모달 상자의 임시 변수에 할당한 다음 인스턴스의 값을 변경하고 삽입을 다시 삭제했습니다. 동일한 인스턴스를 운영하고 있어서 Angular는 [값이 변경되었음에도 불구하고] 변경 사항을 감지하지 못했습니다.

그렇다면 올바른 접근 방식은 무엇입니까? ?

값을 할당할 때 게으르지 마세요. 새 개체를 다시 만든 다음 원래 개체에 할당된 값을 가져와야 합니다. [딥카피와 동일]

      this.selectedType = this.newModelType();
      const old = this.modelList.at(index);
      this.selectedType.setValue({
        'modelName': old.get('modelName').value
    })

현재로서는 정상적으로 업데이트가 가능합니다.

Summary🎜🎜🎜사실 결국은 본질적으로 문서로의 복귀였습니다. 오류 문제 해결에도 함정이 많고, 중국에는 기본적으로 각도 관련 기사가 없기 때문에 문제를 찾기 위해 외부 포럼에 의존해야 합니다. 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 교육🎜을 방문하세요! ! 🎜

위 내용은 Angular에서 FormArray 및 모달 상자를 사용하는 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!