Question

我有这样的反应形式

https://stackblitz.com/edit/angular-form-array-duplicate-validation-ese9ap?file=src/app/app.component.ts

在表单中，只要有重复的用户，我都希望为用户名Array中的每个元素触发isNameDup（）。

我想在输入标签之后向最终用户指示错误。

我不确定* ngIf子句应该是什么。

我的尝试是

public class Scale : MonoBehaviour 
{
    void Update ()
    {
        var scale = Mathf.Sin(Time.timeSinceLevelLoad / 4f) * 20;
        this.transform.localScale = new Vector3(scale, scale, 1);
    }
}

在stackbiltz中，我需要以某种方式将第17行替换为第19行，以便if条件的值为true并显示消息，请输入其他名称文本。

Answer 1

您必须这样做

isNameDuplicate:boolean = false;

inputField.valueChanges
    .filter(val => val.length >= 2)
    .debounceTime(500)
    .switchMap(val => this.http.get(`http://myapi.com/${val}`))
    .subscribe(valid => isNameDuplicate = valid);

tempalte

  <input- Field> //replace this with html inputfield
  <span *ngIf="isNameDuplicate"> duplicate name </span>

或(validation based)

   checkDuplicateName(control: AbstractControl) {
    return this.http
      .get('http://myapi.com/${control.value}')
      .delay(1000)
      ..map(res => {
           return !res.isDupliCate ? null : { isNameDuplicate: true };
      });
  }

  //when adding filed
  name: [
    '',
    [Validators.required],
    this.checkDuplicateName.bind(this)
  ]

模板

<input type="text" formControlName="name">
  <div *ngIf="myForm.get('name').errors && myForm.get('name').errors.isNameDuplicate">
    Duplicate name
  </div>

Answer 2

尝试一下

function isNameDup() {
  const validator: ValidatorFn = (formArray: FormArray) => {  
    const control= formArray.controls
      .map(control => control.value);
      const names = control.map(value=> value.username)
       const hasDuplicate = names.some(
    (name, index) => names.indexOf(name, index + 1) != -1
  );  
     return  hasDuplicate ? { duplicate: true } : null;
  }
  return validator;
}

派生示例：https://stackblitz.com/edit/angular-form-array-duplicate-validation-f54kxv

角反应形式和span标签中的显示错误

2 个答案: