Как я должен инициализировать ngbDatepicker с formControlName вместо [(ngmodel)]

Question

Мне нужно использовать ReactiveForms, с [formGroup] а также 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],
});

}

В моем коде я попытался ввести значение по умолчанию:

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

или же

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

но он не принимает значение по умолчанию, и все документы упоминают только случай с шаблонами форм.

Любая идея, как я должен это сделать?

Answer 1

  dateIni: ['', Validators.required],

Вы должны поставить свое начальное значение здесь, как

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

в правильном формате

Answer 2

Я столкнулся с той же проблемой и решил, используя приведенный ниже фрагмент кода

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],

    });

  }

Answer 3

Datepicker интегрирован с формами Angular и работает как с реактивными формами, так и с формами, управляемыми шаблонами. Таким образом, вы могли бы использовать[(ngModel)],[formControl], , и т.д. ИспользованиеngModelпозволит вам как получить, так и установить выбранное значение

Пример сformControlName

HTML

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

Машинопись

      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
  },

  // ...

});