0

I've recently started working on Angular. I'm sorry if I'm asking a wrong question. I've created a stackblitz also. But please let me explain. I've created two custom components from the scratch. One is Timeselector and the other is Monthpicker. Inside Timeselector I'm calling Monthpicker twice. Where Monthpicker is just a collection of 3 input fields (one for arrow symbol in between and two for entering values) which will accept startRange and endRange as input in MM-DD-YYYY format only. Validation being handled by moment.

timeselector.component.html

Primary range:
<app-monthpicker></app-monthpicker>

Reference range:
<app-monthpicker></app-monthpicker>

<button (click)="onSubmit()">Submit</button>

monthpicker.component.html

<div class="wrapper">
  <input type="text" [(ngModel)]="startRange" placeholder="MM-DD-YYYY">
  <input type="text" value="{{arrowSymbol}}" readonly>
  <input type="text" [(ngModel)]="endRange" placeholder="MM-DD-YYYY">
</div>

monthpicker.component.ts

import { Component, OnInit } from '@angular/core';
import moment from 'moment';

@Component({
  ...
})
export class MonthpickerComponent implements OnInit {

  arrowSymbol = String.fromCharCode(parseInt('2794', 16));

  startRange: string;
  endRange: string;

  isRangeValid: boolean;

  dateErrors: Set<string>;

  constructor() { }

  ngOnInit() {
  }

  triggerValidate() {
    this.validate(this.startRange, this.endRange);
  }

  validate(sDate: string, eDate: string) {
    this.isRangeValid=true;
    this.dateErrors = new Set<string>();
    const fromDate = moment(sDate, 'MM-DD-YYYY', true);
    const toDate = moment(eDate, 'MM-DD-YYYY', true);
    if (!fromDate.isValid() || !toDate.isValid()) {
      this.dateErrors.add('Errors.DateIsNotValid');
      this.isRangeValid = false;
    }
    if (fromDate.isAfter(toDate)) {
      this.dateErrors.add('Errors.StartDateMoreThanEndDate');
      this.isRangeValid = false;
    }
    if (this.isRangeValid) {
      console.log("All good!");
      console.log("Primary range: "+this.startRange+" to "+this.endRange);
      console.log("Secondary range: "+this.startRange+" to "+this.endRange)
    }
    console.log(this.dateErrors);
  }
}

You can see I've bound the properties to startRange and endRange. I can bind only these two properties because Monthpicker component is one component being called twice. But I want all four values to be validated and printed on console viz. Primary range start and end dates and also for reference range start and end dates. How to create two instances of same component. I've checked this also:

  1. How to inject new instance of same component in Angular2

But I didn't understand that very well. Hope I was able to explain the problem statement. I'm afraid my entire implementation is wrong. Please help me.

Tanzeel
  • 4,174
  • 13
  • 57
  • 110

1 Answers1

1

Instead of ViewChild, ViewChildren can be used for accessing multiple child components.

Then each child component in the parent component can be validated.

monthpicker.component.ts

Instead of using ViewChild:

@ViewChildren(MonthpickerComponent) 
monthpicker: MonthpickerComponent[];

Then on the onSubmit method:

onSubmit() {
  this.monthpicker.forEach(picker => {
    picker.triggerValidate();
  });
}

StackBlitz: https://stackblitz.com/edit/angular-zdt48j?file=src%2Fapp%2Ftimeselector%2Ftimeselector.component.ts

  • this was really helpful Sir. Give me some time. I'll implement this, run some test cases then I'll get back to you. today only, by the EOD i'll update you. thanks :-) – Tanzeel Feb 14 '20 at 10:29
  • Is there any way that I can store them separately. Because my main motive is to create some mix up dates ranges. For e.g. Primary start range VS Reference end range. – Tanzeel Feb 14 '20 at 10:40
  • Ok Sir. Leave it. I did it on my own :-) – Tanzeel Feb 14 '20 at 11:20
  • You can create an `@Input()` for naming component and then using that property, you can identify child components. – Jins Thomas Shaji Feb 14 '20 at 11:23
  • Sir I've made changes to my stackblitz. Can you please edit in that. I've written a different code there. – Tanzeel Feb 14 '20 at 11:24
  • 1
    Check this please: https://stackblitz.com/edit/angular-hfguvl?file=src%2Fapp%2Fmonthpicker%2Fmonthpicker.component.ts – Jins Thomas Shaji Feb 14 '20 at 11:34
  • thank you Sir. You solved my headache. I just wanted to know the logic. Now I'll use this in a bigger picture. :-) – Tanzeel Feb 14 '20 at 12:28