web-dev-qa-db-fra.com

Angular 6 Validation de la saisie semi-automatique du matériau

Nous développons notre application en utilisant Angular 6 material. Nous avons une boîte de sélection qui a une fonction de saisie semi-automatique. J'ai une validation requise pour ma boîte de sélection donc, quand un utilisateur recherche une option et il/elle ne sélectionne aucune des options mais conserve le terme de recherche dans la zone de sélection et parce qu'il n'y a qu'une validation requise de la zone de sélection, mon formulaire est publié dans l'API. Ce que je veux réaliser, c'est de ne pas autoriser l'utilisateur à publier le formulaire à moins qu'il sélectionne l'une des options qui ne spécifie pas uniquement un terme de recherche. Comment puis-je y parvenir?

<mat-form-field>
   <input matInput placeholder="Pick one" aria-label="pick one" [matAutocomplete]="auto" [formControl]="form.controls['SELECTBOX_VALUE']">
      <mat-autocomplete #auto="matAutocomplete">
           <mat-option *ngFor="let option of myOptions | async" [value]="option.name"> <span>{{ option.name }}</span> </mat-option>
            </mat-autocomplete>
</mat-form-field>
<small *ngIf="!form.controls['SELECTBOX_VALUE'].valid && form.controls['SELECTBOX_DEGER'].touched" class="mat-text-warn">Please select.</small>

ngOnInit() {
    this.form = this.fb.group({
        ... some other fields
        SELECTBOX_VALUE: [null, Validators.required]
    });

Voici mon code de filtre pour la saisie semi-automatique c'est assez simple

this.form.get('SELECTBOX_VALUE').valueChanges
        .pipe(
            startWith(''),
            map(option => secenek ? this.doFilter(option) : this.options.slice())
        );

doFilter (name: string) {
    return this.myOptions.filter(option =>
        option.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
}
angularangular-material2angular-reactive-forms
8
user3055125

Pour ceux qui peuvent avoir besoin d'une approche similaire. Voici ma solution. J'ai construit une règle de validation personnalisée en fonction de mes besoins.

SELECTBOX_VALUE: [null, Validators.compose(
  [Validators.required, FormCustomValidators.valueSelected(this.myArray)]
)]

export class FormCustomValidators {
  static valueSelected(myArray: any[]): ValidatorFn {

    return (c: AbstractControl): { [key: string]: boolean } | null => {
      let selectboxValue = c.value;
      let pickedOrNot = myArray.filter(alias => alias.name === selectboxValue);

      if (pickedOrNot.length > 0) {
        // everything's fine. return no error. therefore it's null.
        return null;

      } else {
        //there's no matching selectboxvalue selected. so return match error.
        return { 'match': true };
      }
    }
  }
}
5
user3055125