Angular Textbox Undefined

Question

So I'm trying to programmatically edit a textbox in a webpage through chromes developer console.

This is the code of the textbox.

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

And here is my code to edit the textbox

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

Though when I try to log in afterward when the textbox visually has text in it. the page says that the textbox is null and there is no text in it. I'm very confused why this is happening considering the autofill function on chrome sets the value correctly and allows me to log in but when I'm trying to do it manually it won't work.

The page is made with Angular if that is important