使用动态模式验证时,Reactive For始终无效

用户名

具有动态模板验证的反应形式在第一次加载时始终无效。即使在我编辑之后,它仍然无效。

仅当我添加动态模式匹配验证时,才会发生这种情况。

这是我的用例:

  • 在用户界面上,最后一行有表格和编辑按钮
  • 最初没有可见的窗体控件
  • 用户单击编辑按钮,然后出现表单控件。

引用此stackblitz

下面是代码

<form [formGroup]="data_form">
    <table class="table table-border">
        <thead>

            <th>
                name
            </th>
            <th>
                age
            </th>
            <th><button class="btn btn-primary ">Save</button></th>
        </thead>
        <tbody>
            <ng-container *ngFor='let item of data;let j = index'>
                <tr>
                    <ng-container *ngFor="let td of keys;let i = index">
                        <ng-container>

                            <td  *ngIf="td !=='isEditable'">
                                {{item[td]}}
                                <input   [formControlName]="getControlName(j,i)" *ngIf="item.isEditable" type="text" name="" id="">
          </td>

                        </ng-container>
                    </ng-container>

                    <td>
                        <button (click)="item.isEditable = true"> Edit</button>
                    </td>
                </tr>
            </ng-container>
        </tbody>
    </table>

</form>

ts代码:

import { Component } from "@angular/core";
import { FormControl, FormGroup, Validators } from "@angular/forms";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular";
  data_form = new FormGroup({});
  public data;
  keys;

  ngOnInit() {
    this.data = [
      {
        name: "Sachin",
        age: 27,

        isEditable: false
      },
      {
        name: "Gopal",
        age: 27,

        isEditable: false
      },
      {
        name: "Pankaj",
        age: 24,

        isEditable: false
      }
    ];
    this.keys = Object.keys(this.data[0]);
    this.data.forEach((element, j) => {
      this.keys.forEach((k, i) => {
        this.data_form.addControl(
          "name_" + j + "_" + i,
          new FormControl(element[k], [Validators.required, Validators.pattern(/^[.\d]+$/)])
        );
      });
    });
  }

  log() {
    console.log(this.data);
  }

  getControlName(j, i) {
    return "name_" + j + "_" + i;
  }
}

提前致谢。

编辑:

我使用过的各种模式:

  • Validators.pattern("^[a-zA-Z0-9 _/]+$")
  • Validators.pattern(/^[.\d]+$/)
  • Validators.pattern(/^(yes|no)$/i)
  • Validators.pattern(/^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(19|20)\d{2}$/)
欧文·凯尔文(Owen Kelvin)

问题实际上是因为该模式已用于所有控件。我使用重构了您的代码FormArray,看来您的模式工作正常

下面是我的方法TS File

  constructor(private fb: FormBuilder) {}
  patterns = [
    /^[.\d]+$/,
    /^(yes|no)$/i,
    /^[a-zA-Z0-9 _/]+$/,
    /^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(19|20)\d{2}$/
  ];
  data = [
    {
      name: "Sachin",
      age: 27,
      isEditable: false
    },
    {
      name: "Gopal",
      age: 27,

      isEditable: false
    },
    {
      name: "Pankaj",
      age: 24,

      isEditable: false
    }
  ];
  keys = [...new Set(this.data.map(item => Object.keys(item)).flat())];
  keyPattern = this.keys.map(item => ({
    key: item,
    pattern: this.patterns.find(pattern =>
      this.data.every(i => pattern.test(i[item]))
    )
  }));
  data_form = this.fb.group({
    persons: this.fb.array(
      this.data.map(item =>
        this.fb.group(
          this.keyPattern.reduce(
            (prev, { key, pattern }) => ({
              ...prev,
              [key]: [
                item[key],
                [Validators.required, Validators.pattern(pattern)]
              ]
            }),
            {}
          )
        )
      )
    )
  });
  get persons(): FormArray {
    return this.data_form.get("persons") as FormArray;
  }

  toggleEdit(j) {
    const currentEditStatus = this.persons.controls[j].get("isEditable").value;
    this.persons.controls[j].get("isEditable").setValue(!currentEditStatus);
  }

的HTML

<form [formGroup]="data_form">
    <table class="table table-border">
        <thead>
      <tr>
        <th> name </th>
            <th>age </th>
            <th><button class="btn btn-primary ">Save</button></th>
      </tr>
        </thead>
        <tbody formArrayName='persons'>
            <ng-container *ngFor='let item of persons.controls;let j = index'>
                <tr [formGroupName]='j'>
                    <ng-container *ngIf="!item.value.isEditable; else editable">
                        <td>{{ item.value.name }}</td>
                        <td>{{ item.value.age }}</td>
                    </ng-container>
                    <ng-template #editable>
                        <td><input formControlName='name'></td>
                        <td><input formControlName='age'></td>
                    </ng-template>
                    <td>
                        <button (click)="toggleEdit(j)">
              {{ !item.value.isEditable ? "Edit": "Cancel"}}
            </button>
                    </td>
                </tr>
            </ng-container>
        </tbody>
    </table>

</form>

请参阅下面的fork演示

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章