CODEWITHSUNDEEP
angulartypescript
Pravu
Pravu

Reputation: 608

Update user got error when disable userid input field

I got error Error: User not found. when I trying to update user profile. Seem like it not send my userId. But when I enable userId input field it working. I dont have any idea how to solve it. Hope you all can help.

HTML

    <form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)" class="form-horizontal row-border">
     <div class="form-group">
     <label class="col-md-2 control-label color-label">User ID</label>
      <div class="col-lg-11 col-md-11 col-sm-11 col-xs-11 padding-left">
        <input matInput type="text" class="form-control form-input" name="userId"
                                                [ngModel]="selectedRow?.userId" [disabled]="selectedRow?.userId" id="userId"
                                                required>
         </div>
         </div>
    <div class="form-group">
     <label class="col-md-2 control-label color-label">User Name</label>
     <div class="col-lg-11 col-md-12 col-sm-12 col-xs-12 padding-left">
     <div class="row">
     <div class="col-md-5">
     <input matInput type="text" class="form-control form-input" name="userName"
                                                    [ngModel]="selectedRow?.userName" id="userName" required>
     </div>

     <label class="col-md-2 control-label color-label">Email</label>
      <div class="col-md-5 padding-left">
       <input matInput type="email" class="form-control form-input" name="email"
                                                    [ngModel]="selectedRow?.email" id="email" required>
       </div>
        </div>
     </div>
<div class="pt-md-3 col-md-11 text-right a_bottom">
   <button type="submit" mat-flat-button color="primary"
                                    [disabled]="isValidForm(userForm)">{{submitButtonLabel}}</button>
 <button type="reset" mat-flat-button color="basic"
                                    (click)="hideUserForm()">Cancel</button>
  </div>

Component

onSubmit(form: NgForm ){
    let data = form.value;
    // data.groups = [].concat(this.groups).toString();
    let method = this.selectedRow ? 'updateUserProfile' : 'createUserProfile';
    this.userProfile[method](new User(data)).subscribe(res => {
      if(method== 'updateUserProfile'){
        this.toastrService.success('update succeeded!');
      }else{
        this.toastrService.success('create new user succeeded');
      }
        this.loadUsers();  
        this.hideUserForm();    
    }, err =>{
      console.error(err);  
    });
  }

Upvotes: 2

Views: 46

Answers (1)

Athanasios Kataras
Athanasios Kataras

Reputation: 26460

This is expected. you can use the following for it to work if you are using form group:

fonSubmit(form: NgForm ){
    let data = this.fg.getRawValue();
    // Rest of the code

Check documentation here

getRawValue()
The aggregate value of the FormGroup, including any disabled controls.

Retrieves all values regardless of disabled status. The value property is the best way to get the value of the group, because it excludes disabled controls in the FormGroup.

If you go with the form value, then you need to use readonly like this:

[readonly]="selectedRow?.userId"

The disabled attribute can be set to keep a user from using the element until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript could remove the disabled value, and make the element usable.

Tip: Disabled elements in a form will not be submitted!

Upvotes: 1

Related Questions