reactiveFRM

import { Component, Input, OnInit  } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-dashboard-schedule',
  templateUrl: './dashboard-schedule.component.html',
  styleUrls: ['./dashboard-schedule.component.scss']
})

export class DashboardScheduleComponent implements OnInit {
  @Input() title: string = 'Horario del restaurante';
  @Input() subtitle: string = 'Horario del restaurante en la semana';
  @Input() day_wk_a: string = 'Lunes a viernes';
  @Input() day_wk_b: string = 'Sabado';
  @Input() day_wk_c: string = 'Domingo';
  @Input() from_sche: string = 'Desde:';
  @Input() to_sche: string = 'Hasta:';
  @Input() day_fes: string = 'Día';
  @Input() day_des: string = 'Descripción';
  @Input() name_main: string = 'Nombre';
  @Input() btn_submit: string = 'Enviar';
  @Input() title_fes: string = 'Días festivos';
  scheduleForm: FormGroup;
  submitted = false;

  constructor(private formBuilder: FormBuilder) { }

   public ngOnInit(): void {
     this.scheduleForm = this.formBuilder.group({
      mondayFridayFrm: ['12:00', Validators.required],
      mondayFridayTo: ['12:00', Validators.required],
      saturdayFrm: ['12:00', Validators.required],
      saturdayTo: ['12:00', Validators.required],
      sundayFrm: ['12:00', Validators.required],
      sundayTo: ['12:00', Validators.required],
      celebration: ['Navidad', Validators.required],
      celebrationDescription: ['Celebración de navidad', Validators.required],
      dateM: ['24/12/2020', Validators.required]
     })
  }


  get f() { return this.scheduleForm.controls; }

  public onSubmit() {
    this.submitted = true;

        if (this.scheduleForm.invalid) {
          return;
      }

      alert('Data\n' + JSON.stringify(this.scheduleForm.value))
  }



}