Based on that example that i like and it works "<form class="row" [formGroup]="fieldForm">
  <div class="col-12">
    <mat-form-field class="w-100">
      <mat-label>Generator</mat-label>
      <mat-select [formControl]="type">
        @for (generator of generatorTypes(); track generator) {
          <mat-option [value]="generator.value">{{
            generator.viewValue
          }}</mat-option>
        }
      </mat-select>
      <mat-hint>Choose how to generate values for this field</mat-hint>
    </mat-form-field>
  </div>

  @if (fieldForm.get("scale")) {
    <div class="col-12">
      <mat-form-field class="w-100">
        <mat-label>Scale</mat-label>
        <input matInput formControlName="scale" placeholder="e.g., 2" />
        <mat-hint
          >Enter the number of decimal places (e.g., 2 for 10.20)</mat-hint
        >
      </mat-form-field>
    </div>
  }

  @if (fieldForm.get("mean")) {
    <div class="col-12">
      <mat-form-field class="w-100">
        <mat-label>Mean</mat-label>
        <input matInput formControlName="mean" placeholder="e.g., 50" />
        <mat-hint
          >Enter the average value (mean) for the normal distribution</mat-hint
        >
      </mat-form-field>
    </div>
  }

  @if (fieldForm.get("stdDev")) {
    <div class="col-12">
      <mat-form-field class="w-100">
        <mat-label>Standard Deviation</mat-label>
        <input matInput formControlName="stdDev" placeholder="e.g., 5" />
        <mat-hint
          >Enter the standard deviation for the normal distribution</mat-hint
        >
      </mat-form-field>
    </div>
  }

  @if (fieldForm.get("min")) {
    <div class="col-12">
      <mat-form-field class="w-100">
        <mat-label>Minimum Value</mat-label>
        <input matInput formControlName="min" placeholder="e.g., 1" />
        <mat-hint>Enter the minimum value of the range</mat-hint>
      </mat-form-field>
    </div>
  }

  @if (fieldForm.get("max")) {
    <div class="col-12">
      <mat-form-field class="w-100">
        <mat-label>Maximum Value</mat-label>
        <input matInput formControlName="max" placeholder="e.g., 100" />
        <mat-hint>Enter the maximum value of the range</mat-hint>
      </mat-form-field>
    </div>
  }

  @if (fieldForm.get("values")) {
    <div class="col-12">
      <mat-form-field class="w-100">
        <mat-label>Values</mat-label>
        <input
          matInput
          formControlName="values"
          placeholder="e.g., 10, 20, 30"
        />
        <mat-hint>Enter numeric values separated by commas</mat-hint>
      </mat-form-field>
    </div>
  }

  @if (fieldForm.get("weights")) {
    <div class="col-12">
      <mat-form-field class="w-100">
        <mat-label>Weights</mat-label>
        <input
          matInput
          formControlName="weights"
          placeholder="e.g., 0.3, 0.3, 0.4"
        />
        <mat-hint>
          Enter decimal weights between 0 and 1, separated by commas. The
          weights should sum to 1.
        </mat-hint>
        <button (click)="onToggleAutorenew()" matIconSuffix mat-icon-button>
          <mat-icon>{{ autoRenew() ? "autorenew" : "pause" }}</mat-icon>
        </button>
      </mat-form-field>
    </div>
  }

  @if (fieldForm.get("start")) {
    <div class="col-12">
      <mat-form-field class="w-100">
        <mat-label>Start Value</mat-label>
        <input matInput formControlName="start" placeholder="e.g., 0" />
        <mat-hint>Enter the starting value of the sequence</mat-hint>
      </mat-form-field>
    </div>
  }

  @if (fieldForm.get("step")) {
    <div class="col-12">
      <mat-form-field class="w-100">
        <mat-label>Step</mat-label>
        <input placeholder="e.g., 1" matInput formControlName="step" />
        <mat-hint
          >Enter the step size to increment or decrement the value</mat-hint
        >
      </mat-form-field>
    </div>
  }
</form>
". Create for this html "<form class="row" [formGroup]="fieldForm">
  <div class="col-12">
    <mat-form-field class="w-100">
      <mat-label>Generator</mat-label>
      <mat-select formControlName="type">
        @for (generator of generatorTypes(); track generator) {
          <mat-option [value]="generator.value">{{
            generator.viewValue
          }}</mat-option>
        }
      </mat-select>
    </mat-form-field>
  </div>

  @if (fieldForm.get("pattern")) {
    <div class="col-12">
      <mat-form-field class="w-100">
        <mat-label>Pattern</mat-label>
        <input formControlName="pattern" matInput />
      </mat-form-field>
    </div>
  }

  @if (fieldForm.get("duration")) {
    <div class="col-12">
      <mat-form-field class="w-100">
        <mat-label>Duration</mat-label>
        <input matInput formControlName="duration" />
        <mat-hint>2 days or -5 days</mat-hint>
      </mat-form-field>
    </div>
  }

  @if (fieldForm.get("start")) {
    <div class="col-12">
      <mat-form-field class="w-100">
        <mat-label>Start</mat-label>
        <input [matDatepicker]="picker" matInput formControlName="start" />
        <mat-hint>YYYY-MM-DD</mat-hint>
        <mat-datepicker-toggle [for]="picker" matIconSuffix />
        <mat-datepicker #picker />
      </mat-form-field>
    </div>
  }

  @if (fieldForm.get("end")) {
    <div class="col-12">
      <mat-form-field class="w-100">
        <mat-label>End</mat-label>
        <input [matDatepicker]="picker" matInput formControlName="end" />
        <mat-hint>YYYY-MM-DD</mat-hint>
        <mat-datepicker-toggle [for]="picker" matIconSuffix />
        <mat-datepicker #picker />
      </mat-form-field>
    </div>
  }

  @if (fieldForm.get("values")) {
    <div class="col-12">
      <mat-form-field class="w-100">
        <mat-label>Values</mat-label>
        <input
          repeatMask
          dataMask="0000-00-00"
          matInput
          formControlName="values"
        />
      </mat-form-field>
    </div>
  }

  @if (fieldForm.get("weights")) {
    <div class="col-12">
      <mat-form-field class="w-100">
        <mat-label>Weights</mat-label>
        <input
          [readonly]="autoRenew()"
          matInput
          formControlName="weights"
        />
        <button (click)="onToggleAutorenew()" matIconSuffix mat-icon-button>
          <mat-icon>
            {{ autoRenew() ? "autorenew" : "pause" }}
          </mat-icon>
        </button>
      </mat-form-field>
    </div>
  }
</form>
" meaningful mat labels and mat hints. For example in that case pattern it's something like that "yyyy-MM-dd". And the pattern it's how the values are received from the backend. And values are like values that respect that "0000-00-00" which means YYYY-MM-DD. And those dates are separated by comma automatically by repeatMask