Material angular: ¿Cómo validar Autocompletar contra las opciones sugeridas?

Si hallas algún fallo con tu código o trabajo, recuerda probar siempre en un entorno de testing antes subir el código al trabajo final.

Solución:

Para aquellos que pueden necesitar un enfoque similar. Aquí está mi solución. He creado una regla de validación personalizada según mis necesidades.

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

export class FormCustomValidators 
  static valueSelected(myArray: any[]): ValidatorFn  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 ;
      
    ;
  

Hay dos escenarios con Autocompletar material angular que pueden necesitar ser validados contra una lista de opciones seleccionadas:

1. matriz de cuerdas – Las opciones sugeridas se definen en un array de cuerdas
2. Matriz de objetos – Las opciones sugeridas son una propiedad de objeto definida en un array de Objetos (En este escenario, displayWith Se utilizaría la entrada.)

** Demostración de Stackblitz **

Validar opciones de matriz de cadenas

Validar autocomplete contra un array de string opciones, el validador puede aceptar las array de opciones y comprobar si el valor de control está incluido.

function autocompleteStringValidator(validOptions: Array): ValidatorFn  null => 
    if (validOptions.indexOf(control.value) !== -1) 
      return null  /* valid option selected */
    
    return  'invalidAutocompleteString':  value: control.value  
  

El validador podría agregarse a un FormControl junto con otros validadores integrados como Validators.required:

public autocompleteControl = new FormControl('', 
       validators: [autocompleteStringValidator(this.options), Validators.required] )

Validar opciones de matriz de objetos

Validar autocomplete contra un array de opciones de objeto, el validador puede aprovechar el hecho de que el control.value solo sera un string si es valido Object la opción no ha sido seleccionada.

function autocompleteObjectValidator(): ValidatorFn  null => 
    if (typeof control.value === 'string') 
      return  'invalidAutocompleteObject':  value: control.value  
    
    return null  /* valid option selected */
  

Comentarios y calificaciones

Si te animas, tienes la opción de dejar un enunciado acerca de qué le añadirías a este enunciado.

---

---

Utiliza Nuestro Buscador