Форма angular с переключателем с одним входом

Question

У меня есть компонент с переключателем частей, в котором пользователь должен заполнить поле ввода (T1, T2, T3). Т1 открыт по умолчанию. Раньше после заполнения части 1 пользователь нажимал кнопку «Отправить», и данные отправлялись на сервер, затем нажимал T2 - отправить, затем - T3 - отправить. Теперь мне нужно отправить значения после заполнения всех частей, но когда я заполняю T1, кнопка отправки становится активной, поле ввода T2 становится чистым, а кнопка отправки становится отключенной.

Возможно ли с формой с одним входом получить все 3 значения, а затем отправить их при отправке.

<ng-container *ngIf="value.PartId == activatedPart">
    <app-send-value [activatedPart]="activatedPart"></app-send-value>
</ng-container> 

and in <app-send-value> I have form with mat-input


    <form (ngSubmit)="onSubmit()" >
        <mat-form-field>
            <input matInput
                   type="number"
                   required
                   value="{{value}}"
                   [(ngModel)]="value">
        </mat-form-field>

            <button type="submit"
                    [disabled]="sendValue.invalid">
                Submit
            </button>
    </form>

моя форма

Answer 1

Обновление на основе вашего примера stackblitz: Измените следующим образом

send.component. html:

<form class="value-form"
          id="sendValue"
          (ngSubmit)="onSubmit()"
          autocomplete="off"
          #sendValue="ngForm">
            <input matInput
                   class="value-input"
                   type="number"
                   name="value"
           placeholder="fill the field"
           onfocus="this.value=''"
                   id="value"
                   required
                   [(ngModel)]="value[activatedPart - 1]">
        <div class="send-form-buttons">
            <button class="app-btn-success-sm"
                    type="submit"
                    [disabled]="checkDisabled()">
                Submit
            </button>
        </div>
    </form>

send.component.ts:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-send',
  templateUrl: './send.component.html',
  styleUrls: ['./send.component.css']
})
export class SendComponent implements OnInit {
  constructor() { }

@Input() activatedPart = 0;
@Input() switchesLength = 0;
value: number[] = [];

  ngOnInit() {
  }

  get formInvalid() {
        return false
    }

  onSubmit() {
        if (this.formInvalid) return;

    console.log(this.value)
  }

  checkDisabled() {
    if(Array.isArray(this.value) && this.value.length === 3) {
      return !this.value.every(function(element) {return !!element;}); 
    }
    return true;
  }
}

Вы можете очистить значения при отправке, просто написав this.value = []; в функции отправки и удалив onfocus="this.value=''" из <input> тега