Having an issue where the value passed from TypeScript to an input element is displayed on the screen, but the ngForm parameters show that the value is empty and the form is invalid.
Here is the HTML component:
<form #editForm="ngForm" (ngSubmit)="onSubmit(editForm)" novalidate autocomplete="off">
<input type="text" name="sysid" id="sysid" readonly value="{{userList.sysid}}">
<div class="form-group row">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" placeholder="Enter username" name="username" #username="ngModel" ngModel required [class.invalid]="username.invalid" aria-describedby="unameErr" value="{{userList.username}}">
<small *ngIf="username.invalid" id="unameErr" class="form-text">Username is Required</small>
</div>
<div class="col-sm-6">
<label for="firstname">First Name</label>
<input type="text" class="form-control" id="firstname" placeholder="Enter First Name" name="firstname" #firstname="ngModel" ngModel required [class.invalid]="firstname.invalid" aria-describedby="fnameErr" value="{{userList.firstname}}" oninput="this.value = this.value.toUpperCase()">
<small *ngIf="firstname.invalid" id="fnameErr" class="form-text">First Name is Required</small>
</div>
</div>
<input type="submit" class="btn btn-primary" value="Save" [disabled]="editForm.invalid">
</form>
This is my TypeScript code:
ngOnInit(): void {
this.sub = this.route.params.subscribe(params => {
this.formId = +params['formId']; // (+) converts string 'id' to a number
});
this.userList = {
sysid: "",
username: "",
firstname: ""
}
this.getUserByIdnew(this.formId);
}
getUserByIdnew(formSysid: number) {
this.apiservice.getUserbyIdnew(formSysid).subscribe((data: any) => {
this.userList = {
sysid: data.sysid,
username: data.username,
firstname: data.fname
}
})
}
onSubmit(form: NgForm) {
console.log(form);
}
}
Upon submission, the console log displays:
https://i.sstatic.net/UJpqy.png
Despite values being displayed on the screen as shown in this image below: