Código de inicio
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: <a href="/comunidad/publicaciones?q=%23fff" data-community-hashtag="true">#fff</a>;
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 <a href="/comunidad/publicaciones?q=%23DFE1E6" data-community-hashtag="true">#DFE1E6</a>;
background-color: <a href="/comunidad/publicaciones?q=%23FAFBFC" data-community-hashtag="true">#FAFBFC</a>;
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