You are currently browsing the category archive for the ‘sw’ category.

Antes veíamos una manera de comunicar dos componentes. Ahora presentaremos una forma de validar los campos de un formulario.

Añadimos la directiva de validación al módulo de EvaluationComponentsModule:

const AmountValidatorDirective: ng.IDirective = () => ({
  require: 'ngModel',
  link(scope, elm, attrs, ctrl) {
    ctrl.$validators['amount'] = (modelValue, viewValue) => {
      if (ctrl.$isEmpty(modelValue)) return true;
      return modelValue < 5;
    };
  },
});

Sólo queda usarla en el template de SurveyComponent para empezar a validar que solamente se ingresen números menores que cinco. El ejemplo completo se muestra aquí. 🙂

Como comentaba en una publicación anterior, ahora veremos una forma de comunicación entre dos componentes de AngularJS que forman parte de otro componente intermediario.

Tenemos un componente de evaluación

const EvaluationComponent: ng.IComponentOptions = {
  controller: EvaluationController,
  template: `
  <survey data="$ctrl.data"></survey>
  <chart data="$ctrl.data"></chart>
  `,
}

y su controlador

class EvaluationController implements ng.IController {
  data: EvaluationData;

  constructor() {
    this.data = {
      amount: 0,
    };
  }
}

Notemos que este componente se sirve de otros dos para poder ingresar datos y luego mostrarlos respectivamente. Así pues, la manera más sencilla de pasar información entre componentes es tener un padre común, EvaluationComponent, que inicie este contenedor de datos y lo comparta a su jerarquía de subcomponentes, como es el caso de ChartComponent y SurveyComponent.

const ChartComponent: ng.IComponentOptions = {
  bindings: {
    data: '=',
  },
  controller: ChartController,
  template: `
  <label>chart: {{ $ctrl.data.amount }}</label>
  <button ng-click="$ctrl.next()">Next</button>
  `,
};
const SurveyComponent: ng.IComponentOptions = {
  bindings: {
    data: '=',
  },
  template: `
  survey:
  <input
    ng-model="$ctrl.data.amount"
    value="$ctrl.data.amount"
  >
  `,
};

En el caso de SurveyComponent, el monto se actualiza desde el formulario, mientras que ChartComponent lanza un evento clic

class ChartController {
  data: EvaluationData;

  next() {
    this.data.amount++;
  }
}

El ejemplo completo puede verse aquí.