3

Me gustaría obtener el valor de dos fechas obtenidas desde un datapicker en angular, y poder pasarlo al controlador en una variable, y en vez de mostrar el valor de la fecha en formato con slash , cambiarlo a guion, por ejemplo "2019-07-16" y asignarlo dentro de de la función getListOrder, en la linea comentada. La idea es obtener tener un filtro entre dos fechas para realizar un gráfico para un componente

Adjunto el html de mi componente

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { OrderInterface } from '../../../models/order';
import { NgForm } from '@angular/forms';
import { AuthService } from '../../../services/auth.service';
import { AngularFireAuth } from '@angular/fire/auth';
import { UserInterface } from '../../../models/user';
import { OrderService } from '../../../services/order.service';
import { DetailsInterface } from 'src/app/models/details';
import * as moment from "moment";

declare let Chart: any;

@Component({
  selector: 'chart-list',
  templateUrl: './chart-list.component.html',
  styleUrls: ['./chart-list.component.css']
})
export class ChartListComponent implements OnInit {

  constructor(private dataApi: OrderService,  private authService: AuthService) { }
  private details: DetailsInterface[];
  private charts: OrderInterface[];
  private chartParams: { xParams: string[], yParams: number[] };
  private order = [];
  public isAdmin: any = null;
  public userUid: string = null;

  ngOnInit() {
    this.getListOrder();
  }


getListOrder() {


    this.dataApi.getAllOrdersOffer()
      .subscribe(order => {
        this.dataApi.getAllDetails()
          .subscribe((details: any) => {
            // elimianr grafico
            const ids = order.filter((row) => {
              return row.status // && moment(row.date).isSameOrAfter("2019-07-16") && moment(row.date).isSameOrBefore("2019-07-16");
            }).map((row) => row.id);

            let productos = details
            .filter((row) => ids.includes(row.ref))
            .map((detail) => detail.details.map((row) => row.name))
            .join().split(",");
            
            productos = Array.from(new Set(productos));
            this.chartParams = {
              xParams: productos,
              yParams: productos.map((p) => {
                return details.reduce((suma, current) => {
                  return suma += current.details.filter((row) => row.name === p).reduce((suma, current) => {
                    return suma += current.cant;
                  }, 0);
                }, 0);
              })
            };
            this.buildChart();
          });
      });
  }
<mat-form-field>
    <input matInput [matDatepicker]="dp3" placeholder="Fecha de inicio" disabled >
    <mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle>
    <mat-datepicker #dp3 disabled="false"></mat-datepicker>
  </mat-form-field>

3
  • Como estas manejando el Form? en tu formulario ? tienes FormGroup? Commented el 16 jul. 2019 a las 13:31
  • 1
    no tengo uno, ahora por lo que busque ¿ deberia ir de esta manera ? <form [formGroup]="form"> </form> <mat-form-field> <input matInput [matDatepicker]="dp3" placeholder="Fecha de inicio" disabled > <mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle> <mat-datepicker #dp3 disabled="false"></mat-datepicker> </mat-form-field> </form> e importarlo en mi componente asi ? import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms'; luego como podria tener el valor de la fecha? Commented el 16 jul. 2019 a las 13:50
  • Te funciono la solución? o como solucionaste el problema ? , si lo solucionaste de forma diferente o si te funciono la respuesta marcarla o da tu respuesta para que puedas ayudar a otros usuarios Commented el 16 jul. 2019 a las 16:48

1 respuesta 1

1

Puedes tomar el valor de esta forma:

En el html agregar esto:

<form method="get" [formGroup]="variableFrom">
   <!-- tu html -->
</form>

En el component agregas esto:

Declaras una variable

 public nombreFrom: FormGroup;

Declaras un metodo para inicializar el formulario asi:

FormInitialize() {
    const nombreDelCampo = new FormControl('', []);

    this.nombreFrom = new FormGroup({
      nombreDelCampo: nombreDelCampo,

    });
  }

En el ngOnInit llamas el metodo

ngOnInit() {
this.FormInitialize();
}

En la vista al campo le agregas el formControlName="nombreDelCampo"

Para acceder al campo solo vasta con llamar al form y el nombre del campo puedes hacerlo de dos formas:

  1. this.nombreFrom.get('nombreDelCampo').value
  2. this.nombreFrom.nombreDelCampo
1
  • Si no estoy mal el formControlName lo debe de llevar el input Commented el 16 jul. 2019 a las 15:35

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.