Form has no value even if I passed a value in angular-CodePudding

So I have this problem where I pass value from typescript to input element. Value is shown in the screen but in the ngForm parameters it says value is empty and the form is invalid.

This 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:

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);
  }

}

And I try to submit and this is shown in the console log:

As you can see status is "INVALID" and username and firstname has no value even if it is displayed in the screen in this image below:

CodePudding user response：

You should not use input value attribute along with ngModel. Instead use ngModel directive to bind the value.

 <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]="userList.username" required [class.invalid]="username.invalid" aria-describedby="unameErr" >
                <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]="userList.firstname" required [class.invalid]="firstname.invalid" aria-describedby="fnameErr"  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>