time-picker value is not updated inside Reactive Form Control

[Robinson-777]

I used time-picker inside Reactive form control ,Issue I faced after changing the time picker view value not updated in component

<form [formGroup]="myform">

[torabian]

Can you provide us a little bit of more details, provide code that we can reproduce.

[bam-dreymers]

[Updated]

I added a new pull request to fix this - all changes are in the AtpDirective file: https://github.com/owsolutions/amazing-time-picker/pull/51/files

I read this blog and basically just applied it to the directive: https://blog.angularindepth.com/never-again-be-confused-when-implementing-controlvalueaccessor-in-angular-forms-93b9eee9ee83

[shanthece]

having same issue in reactive forms, even after followed bam-dreymers answers

[torabian]

I have merged the code since all builds are passing and there is no backward compatibility issue. This will be available after 1.5.0 version, probably by 03 of March, when we deploy to npm.

Please open a new issue, if you still having problems for this.

[Beni90]

Hi guys, just installed the time-picker and have this problem as well. Formfield value is not updated in the component.

When is this going to be fixed?

[ugiordan]

@Beni90 you have two options to make it works:

1. Applying the "atp-time-picker" directive to the input field, e.g.:

<label for="time_picker" class="control-label">Time Picker</label>
<input id="time_picker" formControlName="time_picker" type="time" atp-time-picker>

2. Setting the value of the corresponding form control. This is my case, where I had and input group (input field + button) and want to make both the input and the button opening the time-picker

@Component({
  selector: 'form-time-picker',
  styleUrls: ['./form-time-picker.component.scss'],
  template: `
    <ng-container [formGroup]="formGroup">
     <label for="time_picker" class="control-label">Time Picker</label>
     <div class="input-group mb-2" id="time_picker" (click)="open()">
        <input id="time_picker"
               formControlName="time_picker"
               type="time"
               value="{{selectedTime}}"/>
        <div class="input-group-append">
          <button type="button" class="btn btn-primary btn-icon input-group-text">
            <i class="ion-ios-time-outline"></i>
          </button>
        </div>
      </div>
    </ng-container>
  `,
})
export class FormTimePickerComponent {
  @Input()
  formGroup: FormGroup;

  @Input()
  config: TimePickerConfig;

  selectedTime: string;

  constructor(private atp: AmazingTimePickerService) {
  }

  open() {
    const timePicker = this.atp.open(this.config.pickerConfig);

    timePicker.afterClose().subscribe(time => {
      this.selectedTime = time;
      this.formGroup.controls[this.config.name].setValue(time);
    });
  }

}