0

Buenos días estoy realizando un formulario reactivo con Angular 10 y para hacer una de las validaciones me recomendaron utilizar el metodo getter ya que realicé un método con condicionales y no me funcionó

El getter es el siguiente: este tiene como fin validar el campo del nombre y me devuelve un booleano el caso de que sea true le agregaré la clase invalida al campo. [Con this.forma hago mención a la propiedad de tipo formGroup]

get validarnombre() {
return this.forma.get('nombre')?.invalid && this.forma.get('nombre')?.touched;}

Luego tengo otra duda: no estoy entendiendo porqué en lugar de acceder a la propiedad nombre (que se encuentra dentro de mi objecto forma) NO me deja acceder de la siguiente manera:

  this.forma["nombre"]

pero me SI me deja acceder utilizando .get :

this.forma.get('nombre')

Otra duda también seria porque no me funcionó el método que creé para validar, entiendo que seria hasta mejor que el getter, el método es el siguiente:

validarnombre(): boolean {
if (this.forma.get('nombre')?.invalid && this.forma.get('nombre')?.touched) {
  return false;
}else{
  return true ;
}

1 respuesta 1

1

Sobre tu duda de la obtención de la propiedad.

Esto se debe a que tu formulario no es un arreglo, es un objeto AbstractControl, si imprimes tu formulario en consola, veras que es un objeto con sus distintas propiedades, el método get lo encontraras en formulario.__proto__.__proto__.get

__proto__:
    clearAsyncValidators: ƒ ()
    clearValidators: ƒ ()
    disable: ƒ (opts)
    enable: ƒ (opts)
    get: ƒ (path)
        arguments: (...)
        caller: (...)
        length: 1
        name: ""
        prototype: {constructor: ƒ}
        __proto__: ƒ ()
        [[FunctionLocation]]: forms.umd.js? [sm]:3376
        [[Scopes]]: Scopes[3]

En la línea 3376 de forms.umd.js podrás checar el método get:

 /**
         * Retrieves a child control given the control's name or path.
         *
         * @param path A dot-delimited string or array of string/number values that define the path to the
         * control.
         *
         * @usageNotes
         * ### Retrieve a nested control
         *
         * For example, to get a `name` control nested within a `person` sub-group:
         *
         * * `this.form.get('person.name');`
         *
         * -OR-
         *
         * * `this.form.get(['person', 'name']);`
         */
        AbstractControl.prototype.get = function (path) {
            return _find(this, path, '.');
        };

Sobre tu segunda duda, si usas una función como la siguiente:

validarnombre(): boolean {
if (this.forma.get('nombre')?.invalid && this.forma.get('nombre')?.touched) {
  return false;
}else{
  return true ;
}

Este código solo se ejecutara una vez para validar tu formulario, en cambio usando la palabra reservada get en tu función, estará obteniendo el valor de manera constante.

4
  • Muchisimas gracias oscar, una sola unica se podria obtener la propiedad de esta forma: this.forma.nombre en lugar de : this.forma.get('nombre')
    – xen todex
    Commented el 29 dic. 2020 a las 17:35
  • @RenzoTorrente, no puedes utilizar this.forma.nombre dado que la propiedad nombre no se encuentra en this.forma por que es un objeto FormGroup. Una alternativa para acceder al control nombre sería this.forma.controls.nombre , donde this.forma.controls es un objeto con las propiedades de tu formulario. Commented el 29 dic. 2020 a las 18:01
  • Genial, pero entonces cuando debo aplicar el metodo .get para obtener el valor de una propiedad? y cual seria la logica de este ejemplo: this.forma.get('nombre')
    – xen todex
    Commented el 29 dic. 2020 a las 18:16
  • @RenzoTorrente, depende de cada quien, en lo personal te recomendaría usar el método .get cuando quieras acceder a una propiedad anidada, es decir un formulario mas complejo. Commented el 29 dic. 2020 a las 18:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.