Stackblitz https://stackblitz.com/edit/angular-mh4cox?embed=1&file=src/app/app.component.html
¿Cómo muestro correctamente los mensajes de error en los formularios anidados? La validación funciona por cierto
Probé tantos métodos aquí sin suerte.
Quiero que muestre un mensaje de error en html usando ngIF (... no válido &&... tocado)
Constructor
constructor(private fb: FormBuilder,private http:HttpClient,private requestService:RequestService) { this.myForm = this.fb.group({ id:[""], areaOfInterest: new FormControl("",Validators.required), status: new FormControl("",Validators.required), startDate: new FormControl("",Validators.required), endDate: new FormControl("",Validators.required), description: new FormControl("",Validators.required), notes: new FormControl("",Validators.required), createdBy:"", updatedBy:"", resourceDTOS: this.fb.array([]), }); console.log(this.myForm); this.getOneRequest(localStorage.getItem('requestId')); }Este es el recurso anidado que es un FormArray en este caso
addNewResourceDTOS() { this.control = <FormArray>this.myForm.controls.resourceDTOS; this.control.push( this.fb.group({ seniority: this.fb.control(null,Validators.required), skillDTOS: this.fb.array([this.fb.group({ skill: '' //i dont validate it here })]), resourceNotes: this.fb.control(null,Validators.required), }) ); }La habilidad de matrizDTOS
addNewResourceSkill(control) { control.push( this.fb.group({ skill: new FormControl("",Validators.required), })) }Así es como estoy validando algunas de mis principales variables de formulario
get description() { return this.myForm.get('description'); } get notes() { return this.myForm.get('notes'); }Ejemplo html "notas"
<small *ngIf="notes.invalid && notes.touched" class="text-danger">Please enter notes!</small>se parece a esto
data = { areaOfInterest:"", notes:"", resourceDTOS: [ { seniority: "", skillDTOS: [ { skill: "", } ], resourceNotes:"" } ] }¿Es posible validar al menos las notas de antigüedad/recursos (o la habilidad en el mejor de los casos) también?
En su controlador, puede definir un nuevo método que verificaría la validez de un campo en particular en función de sus índices y sus antepasados. Aquí hay un ejemplo para el campo de habilidad:
component.ts isSkillValid(resourceDTOSIndex: number, skillIndex: number): boolean { const resourceDTOSGroup = this.myForm.controls.resourceDTOS as FormGroup; const skillDTOSGroup = resourceDTOSGroup.controls[resourceDTOSIndex] as FormGroup; const skillDTOS = skillDTOSGroup.controls.skillDTOS as FormGroup; return skillDTOS.controls[skillIndex].valid; };component.html <input formControlName="skill" class="form-control" style="margin-right:5px;" type="text" placeholder="Enter skill" id="skill" name="skill" aria-label="button1" aria-describedby="button1" /> <div *ngIf="!isSkillValid(i, j)"> The skill field has no valid value </div>Realmente le sugiero que refactorice el componente y lo divida en partes más pequeñas, ya que ya es difícil de leer y manipular.
Simplemente puede acceder a los validadores con hasError() . Así que solo apunte al control de formulario que desea, generalmente accedido por myFormgroup.get('formcontrolName')... Entonces, en el caso de su iteración de skill , puede acceder al control de formulario actual desde las lines definidas que ha declarado para cada bucle:
<div *ngFor="let lines of resource.get('skillDTOS').controls; let j=index"> <div [formGroupName]="j"> <input formControlName="skill"/> <div *ngIf="lines.get('skill').touched"> <small *ngIf="lines.get('skill').hasError('required')">REQUIRED</small> </div> </div> </div>