I have this string field component "import {
  ChangeDetectionStrategy,
  Component,
  DestroyRef,
  OnInit,
  inject,
  input,
  output,
  signal,
} from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { FormGroup, ReactiveFormsModule, FormControl } from '@angular/forms';
import { fieldGeneratorMap, GeneratorType } from '../schema-config.model';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';
import { MatInputModule } from '@angular/material/input';
import { SchemaFormFieldGeneratorService } from '../../shared/services/schema-form-field-generator.service';
import { compareToOtherFieldValidator } from '../../shared/validators/compare-to-other-field-validator.validator';
import { startWith } from 'rxjs';
import { matchingArrayLengthsValidator } from '../../shared/validators/matching-array-lenghts-validator.validator';
import { TitleCasePipe } from '@angular/common';
import { RepeatMaskDirective } from '../../shared/directives/repeat-mask.directive';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { ErrorMessagePipe } from '../../shared/pipes/error-message.pipe';
import { uniqueCommaValuesValidator } from '../../shared/validators/unique-comma-values-validator.validator';

type StringFieldGenerator =
  | { type: GeneratorType.Enum; values: string[]; weights: number[] }
  | { type: GeneratorType.Values; values: string[] }
  | {
      type: GeneratorType.Text;
      min_chars: number;
      max_chars: number;
    }
  | {
      type: GeneratorType.GptText;
      description: string;
      min_chars: number;
      max_chars: number;
    }
  | { type: GeneratorType.GptEnum; values: string[]; weights: number[] };

interface StringFieldForm {
  type: FormControl<GeneratorType>;
  minChars?: FormControl<string>;
  maxChars?: FormControl<string>;
  values?: FormControl<string>;
  weights?: FormControl<string>;
  description?: FormControl<string>;
}

@Component({
  selector: 'app-string-field',
  standalone: true,
  imports: [
    ReactiveFormsModule,
    MatFormFieldModule,
    MatSelectModule,
    MatInputModule,
    TitleCasePipe,
    RepeatMaskDirective,
    MatIconModule,
    MatButtonModule,
    ErrorMessagePipe,
  ],
  templateUrl: './string-field.component.html',
  styleUrl: './string-field.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class StringFieldComponent implements OnInit {
  private readonly schemaFormFieldGeneratorSvc = inject(
    SchemaFormFieldGeneratorService,
  );
  private readonly destroyRef = inject(DestroyRef);

  private matchingValuesWeightsValidator = matchingArrayLengthsValidator([
    'weights',
  ]);
  private matchingWeightsValuesValidator = matchingArrayLengthsValidator([
    'values',
  ]);

  public readonly autoRenew = signal(true);

  public readonly generatorTypes =
    input.required<typeof fieldGeneratorMap.string_col>();

  public readonly changeField = output<{
    schema: StringFieldGenerator | undefined;
    valid: boolean;
  }>();

  public uniqueCommaValuesValidator = uniqueCommaValuesValidator;

  public readonly type = this.schemaFormFieldGeneratorSvc.getTypeField({
    value: GeneratorType.Enum,
  });
  public readonly minChars = this.schemaFormFieldGeneratorSvc.getMinField({
    validators: [
      compareToOtherFieldValidator(
        'maxChars',
        (min: number, max: number) => +min < +max,
        'minGreaterThanMax',
      ),
    ],
  });
  public readonly maxChars = this.schemaFormFieldGeneratorSvc.getMaxField({
    validators: [
      compareToOtherFieldValidator(
        'minChars',
        (max: number, min: number) => +min < +max,
        'MaxSmallerThanMin',
      ),
    ],
  });

  public readonly values = this.schemaFormFieldGeneratorSvc.getValuesField();
  public readonly weights = this.schemaFormFieldGeneratorSvc.getWeightsField();
  public readonly description =
    this.schemaFormFieldGeneratorSvc.getDescriptionField();
  public readonly fieldForm = new FormGroup<StringFieldForm>({
    type: this.type,
  });

  public ngOnInit(): void {
    this.type.valueChanges
      .pipe(startWith(this.type.value), takeUntilDestroyed(this.destroyRef))
      .subscribe((type) => {
        this.updateFormControls(type);
      });

    this.fieldForm.valueChanges
      .pipe(
        startWith(this.fieldForm.value),
        takeUntilDestroyed(this.destroyRef),
      )
      .subscribe(() => {
        const schema = this.getTypedFormValue();
        this.changeField.emit({
          schema,
          valid: this.fieldForm.valid,
        });
      });

    this.minChars.valueChanges
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(() => {
        this.maxChars.updateValueAndValidity({ emitEvent: false });
      });

    this.maxChars.valueChanges
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(() => {
        this.minChars.updateValueAndValidity({ emitEvent: false });
      });

    this.values.valueChanges
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(() => {
        if (this.autoRenew() && this.values.valid) this.updateWeights();
      });

    this.weights.valueChanges
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(() => {
        this.values.updateValueAndValidity({ emitEvent: false });
      });
  }

  private updateFormControls(type: GeneratorType): void {
    switch (type) {
      case GeneratorType.Enum:
        this.fieldForm.removeControl('minChars');
        this.fieldForm.removeControl('maxChars');
        this.fieldForm.removeControl('description');

        this.fieldForm.addControl('values', this.values);
        this.fieldForm.addControl('weights', this.weights);

        this.values.addValidators(this.uniqueCommaValuesValidator);
        this.toggleWeightValidationRules();

        break;

      case GeneratorType.Values:
        this.fieldForm.removeControl('minChars');
        this.fieldForm.removeControl('maxChars');
        this.fieldForm.removeControl('description');
        this.fieldForm.removeControl('weights');

        this.fieldForm.addControl('values', this.values);

        this.values.removeValidators([
          this.matchingValuesWeightsValidator,
          this.uniqueCommaValuesValidator,
        ]);
        this.values.updateValueAndValidity({ emitEvent: false });
        break;

      case GeneratorType.Text:
        this.fieldForm.removeControl('values');
        this.fieldForm.removeControl('weights');
        this.fieldForm.removeControl('description');

        this.fieldForm.addControl('minChars', this.minChars);
        this.fieldForm.addControl('maxChars', this.maxChars);

        break;

      case GeneratorType.GptText:
        this.fieldForm.removeControl('values');
        this.fieldForm.removeControl('weights');

        this.fieldForm.addControl('minChars', this.minChars);
        this.fieldForm.addControl('maxChars', this.maxChars);
        this.fieldForm.addControl('description', this.description);

        break;

      case GeneratorType.GptEnum:
        this.fieldForm.removeControl('minChars');
        this.fieldForm.removeControl('maxChars');
        this.fieldForm.removeControl('description');

        this.fieldForm.addControl('values', this.values);
        this.fieldForm.addControl('weights', this.weights);

        this.values.addValidators(this.uniqueCommaValuesValidator);
        this.toggleWeightValidationRules();
        break;
    }
  }

  private splitWithEscapedCommas(str: string): string[] {
    const result = [];
    let current = '';
    let escape = false;

    for (let i = 0; i < str.length; i++) {
      const char = str[i];

      if (escape) {
        if (char === '\\' || char === ',') {
          current += char;
        } else {
          current += '\\' + char;
        }
        escape = false;
      } else {
        if (char === '\\') {
          escape = true;
        } else if (char === ',') {
          result.push(current.trim());
          current = '';
        } else {
          current += char;
        }
      }
    }

    if (current) {
      result.push(current.trim());
    }

    return result;
  }

  private getTypedFormValue(): StringFieldGenerator | undefined {
    const { type, minChars, maxChars, values, weights, description } =
      this.fieldForm.value;

    switch (type) {
      case GeneratorType.Enum:
        if (values && weights)
          return {
            type,
            values: values.split(',').map((v) => v.trim()),
            weights: weights.split(',').map((v) => parseFloat(v)),
          };

        break;

      case GeneratorType.Values:
        if (values) {
          return {
            type,
            values: this.splitWithEscapedCommas(values),
          };
        }

        break;

      case GeneratorType.Text:
        if (minChars && maxChars)
          return {
            type,
            min_chars: parseFloat(minChars),
            max_chars: parseFloat(maxChars),
          };

        break;

      case GeneratorType.GptText:
        if (description && minChars && maxChars)
          return {
            type,
            description,
            min_chars: parseFloat(minChars),
            max_chars: parseFloat(maxChars),
          };

        break;

      case GeneratorType.GptEnum:
        if (values && weights)
          return {
            type,
            values: values.split(',').map((v) => v.trim()),
            weights: weights.split(',').map((v) => parseFloat(v)),
          };

        break;
    }

    return undefined;
  }

  private calculateWeights(): string {
    const values = this.values.value;

    if (!values) return '';

    const valueArray = values
      .split(',')
      .map((v) => v.trim())
      .filter((v) => v !== '');

    if (valueArray.length === 0) return '';

    const weight = (1 / valueArray.length).toFixed(2);

    return Array(valueArray.length).fill(weight).join(', ');
  }

  private toggleWeightValidationRules(): void {
    if (this.autoRenew()) {
      this.values.removeValidators(this.matchingValuesWeightsValidator);
      this.weights.removeValidators(this.matchingWeightsValuesValidator);
    } else {
      this.values.addValidators(this.matchingValuesWeightsValidator);
      this.weights.addValidators(this.matchingWeightsValuesValidator);
    }

    this.values.updateValueAndValidity({ emitEvent: false });
    this.weights.updateValueAndValidity({ emitEvent: false });
  }

  private updateWeights(): void {
    const calculatedWeights = this.calculateWeights();
    this.weights.setValue(calculatedWeights, { emitEvent: true });
  }

  public onToggleAutorenew(): void {
    this.autoRenew.update((value) => !value);

    this.toggleWeightValidationRules();

    if (this.autoRenew()) this.updateWeights();
  }
}
" and i don't know how to approach what i wanna achieve. Basically right now if i write "red, blue, green" in values weights automatically calculates to 0.33, 0.33, 0.33. Which it's what i wanted. but if i write "red\, blue, green" that get's translated as ["red, blue", "green"] and the weights should become 0.5, 0.5