new-task.html

<!-- <div class="wrapper" *ngIf="showModal$ | async"> -->
<div class="wrapper">
  <div class="new-task">      
      <form [formGroup]="newTask" (ngSubmit)="saveTask()">

          <div class="form-input">
              <label>Titulo</label>
              <input formControlName="order" type="text">
          </div>

          <ng-container formArrayName="item" 
          *ngFor="let field of getItems();let i = index" >
          <!-- *ngFor="let field of formItemsGroup$ | async;let i = index" > -->
          
              <div class="form-input" 
              [formGroupName]="i">
                  <label>{{field?.value?.key}}</label>
                  <input formControlName="value" type="text">
              </div>
      
          </ng-container>
        
          <div class="form-input">
              <button class="btn-primary">Guardar</button>
              <button (click)="cancel()" class="btn-default">Cancelar</button>
          </div>
      </form>
  </div>
</div>

new-task.css

.wrapper{
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1;
  top:0;
  right:0;
  background-color: rgba(0,0,0,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
}

.new-task{
  width: 650px;
  padding: 1rem;
  min-height: 400px;
  background-color: #fff;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.new-task form{
  display: flex;
  gap: .5rem; 
  flex-direction: column;
}

.form-input{
  display: flex;
  flex-direction: column;
}

.form-input input, .form-input textarea{
  border:solid 2px #DFE1E6;
  background-color: #FAFBFC;
  min-height: 40px;
  border-radius: var(--border-radius);
  padding: 0 .5rem;
}

new-task.ts

import { Component, OnInit } from '@angular/core';
import { FormArray, FormControl, FormGroup } from '@angular/forms';
import { NewTaskService } from '@modules/task/services/new-task.service';

<a href="/u/Component" data-community-mention="USER" data-community-mention-slug="Component">@Component</a>({
  selector: 'app-new-task',
  templateUrl: './new-task.component.html',
  styleUrls: ['./new-task.component.css']
})
export class NewTaskComponent implements OnInit {

  newTask:FormGroup = new FormGroup({})
  showModal$ = this.newTaskService.showModal$ 

  constructor(
    private newTaskService:NewTaskService
  ) { }

  ngOnInit(): void {
    this.newTask = new FormGroup(
      {
        order: new FormControl(''),
        item: new FormArray([
          new FormGroup(
            {
              key: new FormControl('Precio'),
              value: new FormControl('')
            }
          ),
          new FormGroup(
            {
              key: new FormControl('Observacion'),
              value:new FormControl('')
            }
          ),
        ]),
      }
    )
  }

  getItems():any {
    console.log(this.newTask.get('item'))
    const list = this.newTask.get('item') as FormArray
    return list.controls
  }

  saveTask():void {
    console.log(this.newTask.value)
  }

  cancel():void {
    this.newTaskService.setShow(false)
  }

}

new-task.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

<a href="/u/Injectable" data-community-mention="USER" data-community-mention-slug="Injectable">@Injectable</a>({
  providedIn: 'root'
})
export class NewTaskService {

  _showModal$ = new BehaviorSubject(false)
  showModal$ = this._showModal$.asObservable()

  constructor() { }

  public setShow(flag:boolean){
    this._showModal$.next(flag)
  }
}

En task-page.html agregar al final <app-new-task></app-new-task>

En task.module.ts no olvidar importar el ReactiveFormsModule