pre populate input in form angular

Question

I have a component with a form that has some inputs with data validations How can I pre populate with the logged user's info?

userService.ts

public getCurrentUser():User {
  return this.currentUser;
}

component.ts

vendorInformationForm: FormGroup;
states = states;

constructor(
  private fb: FormBuilder,
  private userService: UserService) { }

ngOnInit() {
  this.initForm();
}

initForm() {
  this.vendorInformationForm = this.fb.group({
    name: [null],
    adress: ['', [Validators.required, Validators.maxLength(60)]],
    city: ['', Validators.maxLength(20)],
    state: ['', [Validators.required]],
    zip: ['', [Validators.required]],
    vendorNumber: [null],
    minimumOrderAmount: ['', [Validators.required, Validators.min(0) ,Validators.pattern('^[0-9]$')]],
    freightPrepaidAt: ['', [Validators.required]],
    preferredShipper: ['', [Validators.required]],
    email: ['', [Validators.required, Validators.email]]
  })
}

component.html

<div class="form-row">
    <div class="col-12">
        <div class="form-group">
            <label for="adress">Adress</label>
            <input type="text" id="adress" class="form-control" formControllName="adress"> 
        </div>
    </div>
</div>

... and so on for every field

Mridul · Accepted Answer · 2019-12-17 10:46:14Z

2

You can use

this.form.setValue({
  name: [response.name],
  adress: [response.address]
});

Replace accordingly to your response

answered Dec 17, 2019 at 10:46

Mridul

1,3661 gold badge8 silver badges19 bronze badges

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

Comments

Adrita Sharma · Accepted Answer · 2019-12-17 10:46:15Z

1

We can use setValue() or patchValue() to set data

Try like this:

let vendorData = {
   name : "Adrita",
   ...
}

this.vendorInformationForm.patchValue(vendorData)

If you have all the information, then use setValue otherwise use patchValue

answered Dec 17, 2019 at 10:46

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Comments

Felix Lemke · Accepted Answer · 2019-12-17 10:49:20Z

1

What properties do the user have? In general you have the possibility to use the form-groups patchValue or setValue function

this.vendorInformationForm.patchValue(this.userService.getCurrentUser());

or

this.vendorInformationForm.setValue(this.userService.getCurrentUser());

The patchValue patches all fields that are matching between the values and the form configuration. The setValue function requires the data to be exactly of the formgroups form.

answered Dec 17, 2019 at 10:49

Felix Lemke

6,4863 gold badges47 silver badges69 bronze badges

Comments

Oscar Nascimento · Accepted Answer · 2019-12-17 11:38:23Z

1

To update your form you can do it using the methods patchValue() or setValue(). This way:

component.ts

   const userInfo =  this.userService.getCurrentUser();

   this.vendorInformationForm.patchValue(userInfo);

edited Dec 17, 2019 at 11:38

answered Dec 17, 2019 at 11:09

Oscar Nascimento

174 bronze badges

Comments

Martin Paucot · Accepted Answer · 2019-12-17 10:46:12Z

0

When initializing your form with this.fb.group you can pass default data to your form inputs :

User user = this.getUser()
    this.vendorInformationForm = this.fb.group({
      name: [this.user.name ? this.user.name : ''],
      adress: [this.user.address ? this.user.address : '', [Validators.required, Validators.maxLength(60)]],
      email: [this.user.email ? this.user.email : '', [Validators.required, Validators.email]],
      ...
    })

If you want to update theses data after the initialization of the form, you can use the patchValue method :

this.vendorInformationForm.patchValue('yourinputname', 'thenewvalue')

answered Dec 17, 2019 at 10:46

Martin Paucot

1,25115 silver badges34 bronze badges

Collectives™ on Stack Overflow

pre populate input in form angular

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related