Reactive form with recurrence editor

[Carla Candiotti]

Hello,

Does the recurrence editor implement reactive forms interface? We can't apply formControlName on ejs-recurrenceeditor, do you have best practices to manage recurrence editor with reactive forms?

See my stackblitz below to illustrate my issue : https://stackblitz.com/edit/angular-tunial?file=app.component.ts,app.component.html,app%2Fapp.module.ts

Thanks for your response!

[Ruksar Moosa Sait]

We do not have support to implement a reactive form interface with the recurrence editor. However, you can achieve the same result by integrating the recurrence editor component into a custom component (recurrence-form-control) and updating the recurrence value in the form group as shown in the code below.

[app.component.html]

<form [formGroup]="formGroup">

      <recurrence-form formControlName="recurrence"></recurrence-form>

 </form>

[app.component.ts]

public formGroup: FormGroup = new FormGroup({

    recurrence: new FormControl('FREQ=DAILY;INTERVAL=1;'),

  });

[recurrence-form-control.component.ts]

onRuleChange(args: RecurrenceEditorChangeEventArgs) {

    this.markAsTouched();

    this.rRule = args.value;

    this.onChange(this.rRule);

  }

Sample: https://stackblitz.com/edit/angular-tunial-e3wvc3?file=app.component.ts,app.component.html,recurrence-form-control.component.ts

Refer the below blog for more reference.

https://blog.angular-university.io/angular-custom-form-controls/