CODEWITHSUNDEEP
angularng-bootstrap
Juliatzin
Juliatzin

Reputation: 19725

How should I initialize ngbDatepicker with formControlName instead of [(ngmodel)]

I need to use ReactiveForms, with [formGroup] and formGroupName="field"

<form [formGroup]="generalForm" (ngSubmit)="onSubmit()">
  <input class="form-control" placeholder="yyyy-mm-dd" 
  formControlName="dateIni" ngbDatepicker #a="ngbDatepicker">
</form>

Component.ts

generalForm: FormGroup;

ngOnInit() {
this.generalForm = this.formBuilder.group({
  name: ['', Validators.required],
  dateIni: ['', Validators.required],
  dateFin: ['', Validators.required],
  registerDateLimit: ['', Validators.required],
});

}

In my code, I tried to put a default value: 

public dateIni: { year: 2017, month: 8, day: 8 };

or 

@Input() dateIni: { year: 2017, month: 8, day: 8 };

but it is not taking the default value and all the docs only mention the case with template forms.

Any Idea how should I do it ?

Upvotes: 12

Views: 9741

Answers (3)

saida lachgar
saida lachgar

Reputation: 237

Datepicker is integrated with Angular forms and works with both reactive and template-driven forms. So you could use [(ngModel)], [formControl], formControlName, etc. Using ngModel will allow you both to get and set selected value

Example with formControlName

HTML

<input
  formControlName="date_input" 
  placeholder="yyyy-mm-dd"
  ngbDatepicker
  #de="ngbDatepicker">

Typescript

public myForm: FormGroup; 

// ...

// > converting the date String to Date object
let date = new Date('2022-12-01T00:00:00+00:00'); 

this.myForm.setValue({

  // ...

  date_input : {
    year: date.getUTCFullYear(), // output: 2022
    month: date.getUTCMonth() +1, // output: 12
    day: date.getUTCDate() // output: 01
  },

  // ...

});

Upvotes: 0

Raja Ram T
Raja Ram T

Reputation: 9121

I have faced the same problem and resolved using below code snippet


    import { Component, OnInit, EventEmitter } from '@angular/core';
    import { FormBuilder, Validators, FormArray, FormGroup } from '@angular/forms';
    import { DatePipe } from '@angular/common';
    
    @Component({
      selector: 'app-profile',
      templateUrl: './profile.component.html',
      styleUrls: ['./profile.component.css']
    })
    export class ProfileComponent implements OnInit {
    
     generalForm: FormGroup;
    
    constructor(
        private fb: FormBuilder,
        private datePipe: DatePipe) { }
    
    ngOnInit() {
    
       this.intilizeForm();
    
        const dateIni = "2018-12-08"
        const iniYear =  Number(this.datePipe.transform(dateIni, 'yyyy'));
        const iniMonth =  Number(this.datePipe.transform(dateIni, 'MM'));
        const iniDay =  Number(this.datePipe.transform(dateIni, 'dd'));
        this.generalForm.controls.dateIni.setValue({
          year: iniYear ,
          month: iniMonth ,
          day: iniDay
        });
      
    }
    
      intilizeForm(): void {
      // Here also we can set the intial value Like dateIni:[ {year:2018,month:08, day: 12}, ..... 
        this.generalForm = this.fb.group({
           name: ['', Validators.required],
           dateIni: ['', Validators.required],
           dateFin: ['', Validators.required],
           registerDateLimit: ['', Validators.required],
         
        });
    
      }

Upvotes: 3

Antoniossss
Antoniossss

Reputation: 32535

  dateIni: ['', Validators.required],

you need to put your initial value here like

 dateIni: ['2014-01-01', Validators.required],

in correct format

Upvotes: 2

Related Questions