Cron-builder

app-cron-builder er en standalone skjemakomponent for å bygge og validere cron-uttrykk. Den implementerer ControlValueAccessor, så den kan brukes med både [(ngModel)] og reactive forms.

---

Kilde og import

Del	Sti
Komponent	ui/ePortal.ui/src/app/shared/components/cron-builder/cron-builder.component.ts
Template	ui/ePortal.ui/src/app/shared/components/cron-builder/cron-builder.component.html
Stil	ui/ePortal.ui/src/app/shared/components/cron-builder/cron-builder.component.scss

import {
  CronBuilderComponent,
  CronBuilderValue,
} from 'src/app/shared/components/cron-builder/cron-builder.component';

---

Feature-tabell

Feature	Støtte	Konfigurasjon
CVA/skjemabinding	Ja	[(ngModel)], formControlName
Daglig/ukentlig/månedlig valg	Ja	frequency og intern preset-logikk
Manuelt cron-uttrykk	Opt-in	showManual
Preview	Opt-in default på	showPreview
Tosidig binding for cron	Ja	cronExpression, cronExpressionChange
Endringspayload	Ja	changed
Serverlagring	Nei	Parent eier lagring

---

Brukseksempel med reactive forms

TypeScript:

scheduleForm = this.fb.group({
  name: ['', Validators.required],
  schedule: this.fb.control<CronBuilderValue | null>(null),
});

save(): void {
  const schedule = this.scheduleForm.controls.schedule.value;
  if (!schedule) return;

  this.integrationService.saveSchedule({
    name: this.scheduleForm.controls.name.value ?? '',
    cronExpression: schedule.cronExpression,
    frequency: schedule.frequency,
  }).subscribe();
}

HTML:

<form [formGroup]="scheduleForm" (ngSubmit)="save()">
  <app-cron-builder
    formControlName="schedule"
    [showManual]="true"
    [showPreview]="true"
    (changed)="previewSchedule($event)">
  </app-cron-builder>

  <button type="submit" class="btn btn-primary" [disabled]="scheduleForm.invalid">
    {{ 'Common.Save' | translate }}
  </button>
</form>

---

Brukseksempel med enkel binding

<app-cron-builder
  [(ngModel)]="schedule"
  [showManual]="false"
  [showPreview]="true"
  (cronExpressionChange)="cronExpression = $event">
</app-cron-builder>

schedule: CronBuilderValue = {
  frequency: 'Daily',
  cronExpression: '0 9 * * *',
  time: '09:00',
  daysOfWeek: [],
  dayOfMonth: 1,
};

cronExpression = this.schedule.cronExpression;

---

API

Type	Navn	Default	Beskrivelse
Input	showManual	true	Viser manuelt cron-felt.
Input	showPreview	true	Viser lesbar forhåndsvisning.
Input	frequency	Daily	Startfrekvens.
Input	cronExpression	''	Startverdi eller ekstern cron-verdi.
Output	frequencyChange		Emitter valgt frekvens.
Output	cronExpressionChange		Emitter generert eller manuelt endret cron.
Output	changed		Emitter komplett CronBuilderValue.

CronBuilderValue inneholder frequency, cronExpression, time, daysOfWeek og dayOfMonth.

---

Kjente fallgruver

Fallgruve	Riktig mønster
Lagre bare frequency	Lagre alltid cronExpression; frekvens er presentasjonsmetadata.
Stol på preview som validering	Valider cron på backend hvis uttrykket styrer produksjonsjobb.
Blande formControlName og [(ngModel)] på samme instans	Velg ett Angular Forms-mønster.
Hardkode scheduler-tekster rundt komponenten	Bruk i18n-nøkler i parent.

---

Relaterte sider

• Komponenter
• Meny-rutevelger