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

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?

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 mismo 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

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)) {

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

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

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] + ' ';
    });
  }
});

Si el comportamiento de for (... in ...) es aceptable / necesario para sus propósitos, puede decirle a tslint que lo permita.

en tslint.json, agregue esto a la sección "reglas".

"forin": false

De lo contrario, @Maxxx tiene la idea correcta con

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

Creo que este mensaje no se trata de evitar su uso switch. En cambio, quiere que lo compruebes hasOwnProperty. El fondo se puede leer aquí: https://stackoverflow.com/a/16735184/1374488