Estoy tratando de desplazarme y enfocar el control no válido en el formulario al enviar. Si estoy usando un elemento de formulario único, funciona como se esperaba, pero cuando estoy usando un elemento de form anidado no funciona.
encuentre el ejemplo de muestra aquí stackblitz .
Cómo desplazarse al control no válido y enfocarse en formularios anidados al enviar el formulario raíz.
Creo que he encontrado una solución a tu problema.
En su directiva, dentro del método scrollToFirstInvalidControl cambie la línea:
const firstInvalidControl: any = this.el.nativeElement.querySelector('.ng-invalid');
con:
let firstInvalidControl: any; let all = document.getElementsByClassName('ng-invalid'); for (var i = 0; i < all.length; i++) { if(all[i].tagName == 'INPUT'){ firstInvalidControl = all[i]; break; } } Tomará todos los elementos que tengan una clase ng-invalid , pero verificará solo aquellos que tengan un tagName como INPUT , ya que su validación es para campos de entrada, no para formularios completos como tales (su código original detectó el primer formulario no válido, pero eso fue 't el formulario que tenía una entrada a la que quería desplazarse).