Angular で FormArray とモーダル ボックスを使用する方法の簡単な分析

FormArray とモーダル ボックスを一緒に使用するにはどうすればよいですか?次の記事では、Angular の FormArray とモーダル ボックスを組み合わせて使用​​する方法を紹介します。

#ビジネス シナリオ

FormArray を使用して動的フォームを作成します。フォームが作成されるたびに、新しい入力がページに追加され、フォームのタイトルが表示されます。[編集] をクリックしてジャンプし、フォームの入力内容をクリックします。 [関連チュートリアルの推奨事項: "

angular チュートリアル"]

    // 封装获取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)

を使用してエンティティを取得し、値をモーダル ボックスに割り当てると、変更の場合は、モーダル ボックスで [保存] をクリックすると変更が表示されます。値はフォーム内で更新されず、フォーム上の入力値を変更するとモーダル ボックスの内容に影響することがわかります。 ただし、モーダルボックスによって追加されたフォームはページに応答できます。

元のエラー コードのアイデア

[編集] をクリックした後、クリックした FormArray 要素を一時変数に渡します
• this.selectedType = 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
    })

現時点では正常にアップデートできます。

要約

実際、最終的には本質的に文書への復帰でした。トラブルシューティングのエラーにも落とし穴が多く、中国には基本的に角度のある記事がないため、問題を見つけるには外部フォーラムに頼らなければなりません。

プログラミング関連の知識について詳しくは、プログラミング教育

をご覧ください。 ！

以上がAngular で FormArray とモーダル ボックスを使用する方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。