Angular patchValue not setting input field value

Question

I am trying to set an input value via form group using patchValue() but the input still remains blank, this is my code sample...

component.html

<form [formGroup]="createStoreForm" (ngSubmit)="createStore()" novalidate>
  <label for="user">Unique User ID</label>
    <input type="text" name="user" class="form-control" [(ngModel)]="storeProfile.user" [formControl]="createStoreForm.controls['user']" readonly>
    <div *ngIf="createStoreForm.controls['user'].hasError('required') && formSubmitAttempt" class="form-error">Store user is required</div>
</form>

component.ts

export class storeProfileComponent implements OnInit {
  storeProfile: any = {};
  userData: any = {};
  userId: any;
  createStoreForm: FormGroup;
  formSubmitAttempt: boolean;

  constructor(fb: FormBuilder, private storeSrv: StoreService, private router: Router) {
    this.createStoreForm = fb.group({
      'user': ['', Validators.required],
    });
  }

  ngOnInit() {
    let tempUser = localStorage.getItem('user');
    if (tempUser) {
      this.userData = JSON.parse(tempUser);
      this.userId = this.userData.id;
    };

  this.createStoreForm.patchValue({
    'user': this.userId.id,  // this.userId.id = undefined here
  });
 }
}

What is the right way to pass value from localStorage to the input field on the form?

first you set this.userId = this.userData.id and then again you set the form with this.userId.id. which is effectiely this.userData.id.id. are you sure thats correct? — tlt
– tlt, Commented May 21, 2018 at 11:20
thanks for noticing, you are right but changing that didn't fix the issue tho. @deezg — CE0
– CE0, Commented May 21, 2018 at 11:29

Muhammed Albarmavi · Accepted Answer · 2018-05-21 11:43:07Z

1

Just remove ngModel and use createStoreForm.value to get from values

<form [formGroup]="createStoreForm" (ngSubmit)="createStore()" novalidate>
  <label for="user">Unique User ID</label>
    <input type="text" name="user" class="form-control" [formControl]="createStoreForm.controls['user']" readonly>
    <div *ngIf="createStoreForm.controls['user'].hasError('required') && formSubmitAttempt" class="form-error">Store user is required</div>
</form>

export class storeProfileComponent implements OnInit {
  storeProfile: any = {};
  userData: any = {};
  userId: any;
  createStoreForm: FormGroup;
  formSubmitAttempt: boolean;

  constructor(fb: FormBuilder, private storeSrv: StoreService, private router: Router) {
    this.createStoreForm = fb.group({
      'user': ['', Validators.required],
    });
  }

  ngOnInit() {
    let tempUser = localStorage.getItem('user');
    if (tempUser) {
      this.userData = JSON.parse(tempUser);
      this.userId = this.userData.id;
    };

  this.createStoreForm.patchValue({
    'user': this.userId.id,  
  });
 }

 public createStore(){
  console.log(this.createStoreForm.value); // get from values 
 }
}

edited May 21, 2018 at 11:43

answered May 21, 2018 at 11:17

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

CE0 Over a year ago

Thanks, your solution retreived the userId to the view but onsubmit it is ommited and not submitted with the form @Muhammad

Muhammed Albarmavi Over a year ago

@CE0 I just update my answer about how you can get the from value on submit

CE0 Over a year ago

Now it works, thanks man. passing this.createStoreForm.value worked right.

Pardeep Jain · Accepted Answer · 2018-05-21 11:26:36Z

1

You need to set value after getting value from local storage like this,

Try this -

export class storeProfileComponent implements OnInit {
  storeProfile: any = {};
  userData: any = {};
  userId: any;
  createStoreForm: FormGroup;
  formSubmitAttempt: boolean;

  constructor(public fb: FormBuilder, private storeSrv: StoreService, private router: Router) { }

  ngOnInit() {
    let tempUser = localStorage.getItem('user');
    if (tempUser) {
      this.userData = JSON.parse(tempUser);
      this.userId = this.userData.id;
    };

    this.createStoreForm = this.fb.group({
      'user': [this.userId.id, Validators.required],
    });
 }
}

<form [formGroup]="createStoreForm" (ngSubmit)="createStore()" novalidate>
  <label for="user">Unique User ID</label>
    <input type="text" name="user" class="form-control" formControl="user" readonly>
    <div *ngIf="createStoreForm.controls['user'].hasError('required') && formSubmitAttempt" class="form-error">Store user is required</div>
</form>

edited May 21, 2018 at 11:26

answered May 21, 2018 at 11:15

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

3 Comments

CE0 Over a year ago

error thrown here this.createStoreForm = fb.group({'user': [this.userId.id, Validators.required]}) cannot find name fb

Pardeep Jain Over a year ago

opps !! just forgot to add this, try my updated answer.

CE0 Over a year ago

yeah i tried that already and error was Property 'fb' does not exist on type 'StoreProfileComponent' :(

Collectives™ on Stack Overflow

Angular patchValue not setting input field value

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related