angular - tslint/codelyzer/ng lint error: "las declaraciones for(... in...) deben filtrarse con una declaración if"

angular2-forms angular-cli

Question

Mensaje de error de pelusa:

src / app / detail / edit / edit.component.ts [111, 5]: para (... en ...) las declaraciones deben filtrarse con una declaración if

Fragmento de código (es un código de trabajo. También está disponible en la sección de validación del formulario angular.io ):

for (const field in this.formErrors) {
      // clear previous error message (if any)
      this.formErrors[field] = '''';
      const control = form.get(field);

      if (control && control.dirty && !control.valid) {
        const messages = this.validationMessages[field];
        for (const key in control.errors) {
          this.formErrors[field] += messages[key] + '' '';
        }
      }
    }

¿Alguna idea de cómo solucionar este error de pelusa?

Answer 1

Para explicar el problema real que señala tslint, una cita de la documentación de JavaScript de for ... en la declaración :

El bucle iterará sobre todas las propiedades enumerables del objeto en sí y aquellas que el objeto herede del prototipo de su constructor (las propiedades más cercanas al objeto en la cadena del prototipo anulan las propiedades de los prototipos).

Entonces, básicamente, esto significa que obtendrá propiedades que podría no esperar obtener (de la cadena de prototipos del objeto).

Para resolver esto, necesitamos iterar solo sobre las propiedades propias de los objetos. Podemos hacer esto de dos maneras diferentes (como lo sugieren @Maxxx y @Qwertiy).

Primera solución

for (const field of Object.keys(this.formErrors)) {
    ...
}

Aquí utilizamos el método Object.Keys() que devuelve una matriz de propiedades enumerables propias de un objeto dado, en el mismo orden que el proporcionado por un bucle for ... in (la diferencia es que un bucle for-in enumera propiedades en la cadena prototipo también).

Segunda solución

for (var field in this.formErrors) {
    if (this.formErrors.hasOwnProperty(field)) {
        ...
    }
}

En esta solución, iteramos todas las propiedades del objeto, incluidas las de su cadena de prototipos, pero utilizamos el método Object.prototype.hasOwnProperty() , que devuelve un valor booleano que indica si el objeto tiene la propiedad especificada como propiedad propia (no heredada), para filtrar las propiedades heredadas

Answer 2

Una forma más ordenada de aplicar la respuesta de @ Helzgate es posiblemente reemplazar su ''for ... in'' con

for (const field of Object.keys(this.formErrors)) {

Answer 3

use Object.keys:

Object.keys(this.formErrors).map(key => {
  this.formErrors[key] = '''';
  const control = form.get(key);

  if(control && control.dirty && !control.valid) {
    const messages = this.validationMessages[key];
    Object.keys(control.errors).map(key2 => {
      this.formErrors[key] += messages[key2] + '' '';
    });
  }
});

Answer 4

for (const field in this.formErrors) {
  if (this.formErrors.hasOwnProperty(field)) {

for (const key in control.errors) {
  if (control.errors.hasOwnProperty(key)) {