Así que estoy tratando de editar mediante programación un cuadro de texto en una página web a través de la consola de desarrollo de Chromes.

Este es el código del cuadro de texto.

 <input formcontrolname="username" placeholder="Username" type="text" required="" class="form-control ng-untouched ng-pristine ng-invalid">

Y aquí está mi código para editar el cuadro de texto.

 document.forms[0].elements[0].id = "boxUsername"; document.getElementById("boxUsername").value = "My value";

Aunque cuando trato de iniciar sesión después cuando el cuadro de texto visualmente tiene texto. la página dice que el cuadro de texto es nulo y que no contiene texto. Estoy muy confundido por qué sucede esto considerando que la función de autocompletar en Chrome establece el valor correctamente y me permite iniciar sesión, pero cuando intento hacerlo manualmente, no funciona.

La pagina esta hecha con Angular si eso es importante