数组 – Angular 4数组验证

发布时间：2020-12-17 07:16:42 所属栏目：安全来源：网络整理

导读：我需要有关反应形式的formArray验证方面的帮助.我想验证数组中的每个项目,但我不知道我该怎么做.谢谢. HTML代码： label for="name"name:/label input formControlName="name" id="name" type="text" div *ngIf="name.invalid (name.dirty || name.touched)"

我需要有关反应形式的formArray验证方面的帮助.我想验证数组中的每个项目,但我不知道我该怎么做.谢谢.

HTML代码：

<label for="name">name:</label>
    <input formControlName="name" id="name" type="text">
    <div *ngIf="name.invalid && (name.dirty || name.touched)">
       <div *ngIf="name.errors.required">
         required
       </div>
    </div>

TypeScript代码：

createForm() {
    this.form = this.fb.group({
      person: this.fb.array([this.initItemRows()])
    });
  }

initItemRows() {
    return this.fb.group({
      name: [''],info: ['']
    });
  }

  addNewRow() {
    const control = <FormArray>this.form.controls['person'];
    control.push(this.initItemRows());
  }

  deleteRow(index: number) {
    const control = <FormArray>this.form.controls['person'];
    control.removeAt(index);
  }

  get name() { return this.form.get('person.name'); }
  get info() { return this.form.get('person.info'); }

我试过这个：

initItemRows() {
    return this.fb.group({
      name: ['',Validators.required ],info: ['',Validators.required ]
    });
  }

它不起作用..

解决方法

您的名称和信息的获取者实际上并不针对特定的表单控件,因为您的人是formArray,例如this.form.get(‘person.name’);在您的表单中不存在.您需要做的是,对每个表单组使用迭代并使用其控件将该目标作为目标,因此您的模板应如下所示：

<div *ngFor="let p of form.controls.person.controls; let i = index" 
             [formGroupName]="i">
  <label for="name">name:</label>
  <input formControlName="name" id="name" type="text">
  <!-- check if the name in this group has the error -->
  <div *ngIf="p.controls.name.dirty">
    <div *ngIf="p.hasError('required','name')">Required</div>  
  </div>
</div>

DEMO

另外一个建议是,你可以稍微缩短你的代码并删除一个初始化/添加formgroup到你的数组不需要的方法,所以在这里我删除了addNewRow,当你想要添加一个新行时可以调用initItemRows .

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

initItemRows() {
  let ctrl = <FormArray>this.form.controls.person;
  ctrl.push(this.fb.group({
    name: ['',Validators.required],Validators.required]      
  }))
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!