Question

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators, ValidatorFn, AbstractControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.buildForm();
  }
  get vehicleGroup(): FormArray {
    return <FormArray>this.myForm.get('vehicleGroup');
  }

  buildForm(): void {
    this.myForm = this.fb.group({
      name: ['', Validators.required],
      vehicleGroup: this.fb.array([
        this.fb.group({
          vehicle: ['', Validators.required]
        })
      ], [Validators.required]),
    });
  }

  addVehicles(): void{
    const itemToAdd = this.fb.group({
      vehicle: ['', Validators.required]
    });
    this.vehicleGroup.push(itemToAdd);
  }
  deleteVehicle(i: number){
    this.vehicleGroup.removeAt(i);
  }

  save(): void{
    console.log('save');
  }
}

<form novalidate (ngSubmit)="save()" [formGroup]="myForm">

  <div class="form-group">
    <label for="name">Name</label>
    <input id="name" type="text" formControlName="name">
  </div>

	<div class="form-group">
		<label for="vehicle">Vehicle</label>
      <div formArrayName="vehicleGroup" *ngFor="let vehicle of vehicleGroup.controls; let i=index">
        <div class="form-group" [formGroupName]="i">
          <div>
            <input id="{{'vehicle'+i}}" type="text" formControlName="vehicle">
            <button type="button" (click)="deleteVehicle(i)"
              *ngIf="vehicleGroup.length >= 2">remove
            </button>                  
          </div>
        </div>
      </div>
      <div class="form-group">
      <button type="button" class="link-button" [disabled]="!vehicleGroup.valid" (click)="addVehicles()">
          + Add more vehicles
      </button>
      </div>
	</div> 
</form>

我有这个(stackBlitz)简单的表格，它是用角形formBuilder创建的

我只需要简单地确定如何验证动态formArray的每个元素，并在该特定字段无效的情况下为每个元素显示唯一的消息。我尝试了几种解决方案，还尝试了custom validator function并返回了ValidatorFn。这样我就可以简单地验证formArray了，但是对于我的场景来说还不够用，但仍然无法根据验证函数的行为显示消息。无论如何缩小范围，我只需要知道是否有更好的方法来验证此formArray的每个动态元素。这些是验证规则。

每个字段的值都应该是唯一的。
需要实时验证
添加了几个元素后，有人编辑了先前添加的字段，还应该使用其他所有字段值进行实时验证（这是我被选中的地方，我可以从编辑字段向上进行验证，但不能验证下方的字段编辑字段已相应验证）

如果有人可以向我展示以正确的方式实现这一目标的方法，那将是非常不错的，因为我已经为之震惊了近三天，但仍然找不到更好的解决方案。

Answer 1

我在项目中使用了df['new'] = df['created Date'].dt.month date_series = df['new'].value_counts() # Counting users per month date_dict = date_series.to_dict() # Converting into dictionary. for key,value in date_dict.items(): # Getting key and value. print(f"{key} Month -->>\t {value} Users")的唯一验证器。它可以直接在组件中使用，而无需创建任何自定义验证功能。

您可以按以下方式编辑addVehicles方法：

@rxweb/reactive-form-validators

并添加

addVehicles(): void{
    const itemToAdd = this.fb.group({
      vehicle: ['', RxwebValidators.unique()]
    });
    this.vehicleGroup.push(itemToAdd);
  }

到ngOnInit。

这里是forked stackblitz

验证并显示特定消息控制器的错误消息，格式为angular

1 个答案: