Как сделать элемент составной строки?

Question

[ABCquestion]

надо сделать чтобы разбито было на несколько инпутов составная строка в которую можно внести такие значение по отдельности ( 00 45 80 00 ) , значения которые бы складывались в одно и отправлялись на сервер

так не получается пробовал и через FormArray ,но его надо вкладывать в форс групп ,хотя в форм групп он один

<ng-template #widgetContent>
      <ng-container class="compound-string-wrapper grid" formArrayName="compoundStringControl">
        <gas-input
          *ngFor="let input of compoundStringControl.controls; index as i" 
          [formControlName]="i"
          class="compound-string"
          nativeType="number"
          [required]="field!!.mandatory ?? false"
          [error]="errorMessage"
         
        >
        </gas-input>
      </ng-container>
  </ng-template>

export class CompoundStringComponent extends FormGeneratorWidgetMixinComponent {
  public compoundStringControl: FormGroup;
  public cellCount?: number = 1;

  public ngOnInit() {
    this.initField();
    this.initSubscriptions();
  }

  private initField(): void {
    debugger;
    if (typeof this.field.rawAttrs?.props?.cellCount === 'number' && this.field.rawAttrs?.props?.cellCount) {
      this.cellCount = this.field.rawAttrs.props.cellCount;
      const compoundStringFilds: any = {};
      for (let i = 0; i <= this.cellCount; i += 1) {
        compoundStringFilds[`fild${i}`] = new FormControl(null);
      }
      this.compoundStringControl = new FormGroup(compoundStringFilds);
    }
  }

  private initSubscriptions(): void {
    this.compoundStringControl.valueChanges.pipe(untilDestroyed(this)).subscribe(() => {
      debugger;
     
    });
  }
}

Comments

[historydev]

Что такое путов и составная строка?

[ABCquestion]

Владимир, вопрос поправил

Answer 1

[historydev]

export class CompoundStringComponent extends FormGeneratorWidgetMixinComponent {
  public compoundStringControl: FormGroup;
  
  constructor() {
  this.compoundStringControl = new FormGroup(
			{
				val1: new FormControl('', [
					Validators.required
				]),
				val2: new FormControl('', [
					Validators.required
				])
			}
		);
  }

  public compound_form_values(form: FormGroup): string {
    return Object.keys(form.value).map(key => form[key].value).join('');
  }
}

Comments

[ABCquestion]

Владимир,но проблема в том что в этот компонент передается значение количество ячеек, поэтому FormGroup должен заполнятся динамически и при уходе или изменении с ячейки надо все ячейки склеивать, можно ли событие ловить на FormGroup?

[historydev]

ABCquestion, зайдите в документацию и посмотрите на FormControl у него есть метод valueChanges на который можно подписаться для определённого поля, так-же аналогичный метод есть у FormGroup