FormArray的FormControl中的唯一值验证答案

【问题标题】：Unique value validation in FormControl of FormArrayFormArray的FormControl中的唯一值验证
【发布时间】：2018-12-25 09:32:39
【问题描述】：

我正在开发工作表，用户可以在工作表中输入他的爱好。我已经对 hobbyName formcontrol 应用了所需的验证，但是如果有多个爱好，我该如何验证应该是唯一的爱好名称。

下面是我的ts代码

import { Component,OnInit } from '@angular/core';
import { FormGroup,FormArray,FormBuilder,Validators } from "@angular/forms"
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
  jobForm:FormGroup
  constructor(private jobfb:FormBuilder){}

  ngOnInit(){
    this.jobForm = this.jobfb.group({
      hobbies:this.jobfb.array([
        this.createHobbyFormGroup()
      ])
    })
  }

  addHobby(){
    let hobbies = this.jobForm.controls.hobbies as FormArray;
    hobbies.push(this.createHobbyFormGroup());
  }

  

  createHobbyFormGroup(){
    return this.jobfb.group({
      hobbyName:['',Validators.required]
    });
  }

}

下面是我的 HTML 代码

<button (click)="addHobby()">Add Hobby</button>
<table>
  <tr [formGroup]="hobbyFG" *ngFor="let hobbyFG of jobForm.controls.hobbies.controls;">
    <input formControlName="hobbyName"/>
  </tr>
</table>
<button [disabled]="!jobForm.valid">Submit</button>

每当用户点击添加按钮时，新的 FormGroup 就会被添加到 FormArray 中。

我不知道如何验证应该是唯一的爱好名称？

请指导。

【问题讨论】：

stackoverflow.com/questions/43577894/…

标签： angular angular-reactive-forms

【解决方案1】：

好的，你可以使用RxwebValidators 包，我已经实现了它的工作。在我的代码下面共享。

在ts文件中（在app模块中导入）

    import { RxwebValidators } from '@rxweb/reactive-form-validators';

    export class ProductComponent implements OnInit ,Product {
    public complexForm: FormGroup = this.builder.group({
    'firstName' : ['',[Validators.required,Validators.pattern('^[a-zA-Z0-9]+$')]],
      'lastName': ['', Validators.minLength(5)],
      hobbies:this.builder.array([
        this.createHobbyFormGroup()
      ]),
      'gender' : 'Female',
      'hiking' : false,
      'running' : false,
      'swimming' : false
    });

    addHobby(){
    let hobbies = this.complexForm.controls.hobbies as FormArray;
    hobbies.push(this.createHobbyFormGroup());
  }

  createHobbyFormGroup(){
    return this.builder.group({
      hobbyName:['',RxwebValidators.unique()]
    });
  }



 }

在 HTML 中

    <table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">hobby Name</th>
    </tr>
  </thead>
  <tbody>
    <tr [formGroup]="skillGroup" *ngFor="let skillGroup of complexForm.controls.hobbies.controls;let i = index;">
      <th scope="row">{{i+ 1}}</th>
      <td><input type="text" formControlName="hobbyName" class="form-control"  />
    </tr>
  </tbody>
</table>
  <div class="form-group">
    <label>hobbies</label>
    <input class="form-control" type="text" [formControl]="complexForm.controls['hobbies']">
  </div>

希望对你有帮助:)

【讨论】：