new-task.html

1<!-- <div class="wrapper" *ngIf="showModal$ | async"> -->
2<div class="wrapper">
3  <div class="new-task">      
4      <form [formGroup]="newTask" (ngSubmit)="saveTask()">
5
6          <div class="form-input">
7              <label>Titulo</label>
8              <input formControlName="order" type="text">
9          </div>
10
11          <ng-container formArrayName="item" 
12          *ngFor="let field of getItems();let i = index" >
13          <!-- *ngFor="let field of formItemsGroup$ | async;let i = index" > -->
14          
15              <div class="form-input" 
16              [formGroupName]="i">
17                  <label>{{field?.value?.key}}</label>
18                  <input formControlName="value" type="text">
19              </div>
20      
21          </ng-container>
22        
23          <div class="form-input">
24              <button class="btn-primary">Guardar</button>
25              <button (click)="cancel()" class="btn-default">Cancelar</button>
26          </div>
27      </form>
28  </div>
29</div>

new-task.css

1.wrapper{
2  position: fixed;
3  width: 100%;
4  height: 100%;
5  z-index: 1;
6  top:0;
7  right:0;
8  background-color: rgba(0,0,0,.3);
9  display: flex;
10  align-items: center;
11  justify-content: center;
12  align-content: center;
13}
14
15.new-task{
16  width: 650px;
17  padding: 1rem;
18  min-height: 400px;
19  background-color: #fff;
20  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
21}
22
23.new-task form{
24  display: flex;
25  gap: .5rem; 
26  flex-direction: column;
27}
28
29.form-input{
30  display: flex;
31  flex-direction: column;
32}
33
34.form-input input, .form-input textarea{
35  border:solid 2px #DFE1E6;
36  background-color: #FAFBFC;
37  min-height: 40px;
38  border-radius: var(--border-radius);
39  padding: 0 .5rem;
40}

new-task.ts

1import { Component, OnInit } from '@angular/core';
2import { FormArray, FormControl, FormGroup } from '@angular/forms';
3import { NewTaskService } from '@modules/task/services/new-task.service';
4
5@Component({
6  selector: 'app-new-task',
7  templateUrl: './new-task.component.html',
8  styleUrls: ['./new-task.component.css']
9})
10export class NewTaskComponent implements OnInit {
11
12  newTask:FormGroup = new FormGroup({})
13  showModal$ = this.newTaskService.showModal$ 
14
15  constructor(
16    private newTaskService:NewTaskService
17  ) { }
18
19  ngOnInit(): void {
20    this.newTask = new FormGroup(
21      {
22        order: new FormControl(''),
23        item: new FormArray([
24          new FormGroup(
25            {
26              key: new FormControl('Precio'),
27              value: new FormControl('')
28            }
29          ),
30          new FormGroup(
31            {
32              key: new FormControl('Observacion'),
33              value:new FormControl('')
34            }
35          ),
36        ]),
37      }
38    )
39  }
40
41  getItems():any {
42    console.log(this.newTask.get('item'))
43    const list = this.newTask.get('item') as FormArray
44    return list.controls
45  }
46
47  saveTask():void {
48    console.log(this.newTask.value)
49  }
50
51  cancel():void {
52    this.newTaskService.setShow(false)
53  }
54
55}
56

new-task.service.ts

1import { Injectable } from '@angular/core';
2import { BehaviorSubject } from 'rxjs';
3
4@Injectable({
5  providedIn: 'root'
6})
7export class NewTaskService {
8
9  _showModal$ = new BehaviorSubject(false)
10  showModal$ = this._showModal$.asObservable()
11
12  constructor() { }
13
14  public setShow(flag:boolean){
15    this._showModal$.next(flag)
16  }
17}
18

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

En task.module.ts no olvidar importar el ReactiveFormsModule