角度+2输入字段验证

Question

我有一个用于验证的输入字段；

此输入验证有效，当我按Enter时，它将新值添加到列表中，列表正显示在elements标签上；

html：

<form class="example-form">
      <mat-form-field class="example-full-width">
        <input 
            type="text"  
            placeholder="Contact" 
            aria-label="Contact" matInput 
            [formControl]="contactAutocompleteControl" 
            [matAutocomplete]="auto"
            (keyup.enter)="addContact($event.target.value)"
            [value]="addTaskValue"
        >
        <mat-autocomplete #auto="matAutocomplete" 
          [displayWith]="displayContactFn">
          <mat-option *ngFor="let contact of filteredContactOptions | async" [value]="contact">
            {{contact.name}}
          </mat-option>
        </mat-autocomplete>
    
        <mat-error *ngFor="let validation of validation_msgs.contactAutocompleteControl">
          <div *ngIf="contactAutocompleteControl.hasError(validation.type)">
            {{validation.message}}
          </div>
        </mat-error>
      </mat-form-field>
    
     <div>
        <ul>
        <li *ngFor="let contact of contactList">
          {{ contact }}
        </li>
      </ul>
      </div>
    </form>

组件

import { Component, OnInit } from '@angular/core';
import { AbstractControl, FormControl, ValidatorFn, Validators } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

export interface Contact {
  name: string;
} 

function autocompleteObjectValidator(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    if (typeof control.value === 'string') {
      return { 'invalidAutocompleteObject': { value: control.value } }
    }
    return null  /* valid option selected */
  }
}

function autocompleteStringValidator(validOptions: Array<string>): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    if (validOptions.indexOf(control.value) !== -1) {
      return null  /* valid option selected */
    }
    return { 'invalidAutocompleteString': { value: control.value } }
  }
}


/**
 * @title Autocomplete validation example.
 */
@Component({
  selector: 'autocomplete-validation-example',
  templateUrl: 'autocomplete-validation-example.html',
  styleUrls: ['autocomplete-validation-example.css'],
})
export class AutocompleteValidationExample implements OnInit {
  public contactOptions: Contact[] = [
    {name: 'Elton John'},
    {name: 'Elvis Presley'},
    {name: 'Paul McCartney'}
  ]

  public contactList: String[] = [];
  public addTaskValue: String;
  
  public filteredContactOptions: Observable<Contact[]>

  public contactAutocompleteControl = new FormControl('', 
      { validators: [autocompleteObjectValidator(), Validators.required] })

  public validation_msgs = {
    'contactAutocompleteControl': [
      { type: 'required', message: 'Contact is required.' }
    ]
  }

  ngOnInit() {
    this.filteredContactOptions = this.contactAutocompleteControl.valueChanges.pipe(
      startWith(''),
      map(value => value ? value.name : undefined),
      map(name => name ? this._filterContacts(name) : this.contactOptions.slice())
    )
  }

  public displayContactFn(contact?: Contact): string | undefined {
    return contact ? contact.name : undefined
  }


  private _filterContacts(name: string): Contact[] {
    if (name === '') {
      return this.contactOptions.slice()
    }
    const filterValue = name.toLowerCase()
    return this.contactOptions.filter(option => option.name.toLowerCase().includes(filterValue))
  }

  public addContact(value: string) {
    this.contactList.push(value);

this.addTaskValue = '';
  }
 }

stackblitz

输入字段焦点验证正在工作。

一旦我将项目添加到数组中，输入将不再有效

当我添加值并按Enter时，它可以工作，但是如果我开始编写并删除字符，则触发验证，如果列表中有任何值，我不想触发验证。