Angular Typescript - Use existing values in FormGroup

Question

In my app I have a list and a form for changing the values in the list.

An input field from my form looks like this for example:

<input matInput id="nameInput" formControlName="name" value="{{person.name}}">

And my list displays data like this:

 <h3 mat-subheader>Name</h3>
      <mat-list-item> {{person.name}} </mat-list-item>

As you can see I use {{person.name}} as value in my form input field. This means the already existing value should be used as a value in the input field and it is actually being displayed correctly in the form input field. Except it doesn't recognize that there's already input in that field, I know this cause my form disables the sumbit button unless there's more than 3 characters in the input field. How can I tell my form to use the already existing value of {{person.name}} and all it's characters?

Damian Martyniuk · Accepted Answer · 2018-02-28 12:37:19Z

1

if i understand correctly i think you should be using setValue or patchValue. so if u have some form, for example:

this.form = this.fb.group({
     name: ['', Validators.required],
});

you can set it's value by calling

this.form.patchValue(this.person); //or setValue()

and your model "person" holds always current value for "name" property

edit: define your model with some properties:

export class Person {
  name: string;
  surname: string;
}

then create some form and new Person:

this.form = this.fb.group({
     name: ['', Validators.required],
     surname: ['', Validators.required],
});
const person = new Person;
person.name = "John";
person.surname = "Doe";
//or get your model from db - thats for you to decide :)

and with those 2 elements you can "populate" your form with model values:

this.form.setValue(this.person);

edited Feb 28, 2018 at 12:37

answered Feb 28, 2018 at 12:23

Damian Martyniuk

3983 silver badges14 bronze badges

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

2 Comments

Jeremy Over a year ago

That makes sense! But how could I set it for each input field individually? For example in the 'name' input field I always want to have {{person.name}} and in 'E-Mail' it would be {{person.email}}

Damian Martyniuk Over a year ago

check my edit :) Your model can have multiple properties - model prop to form field

Collectives™ on Stack Overflow

Angular Typescript - Use existing values in FormGroup

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related