How to use input field value attribute while using formControlName? [Angular]

Question

What I want to achieve: I want pre-populated data in my form and I also want to use formControlName as I want the data too.

My html file -

<div class="container">
    <p class="h4 my-5">Add New Result</p>
    <div class="row">
        <div class="col">
            <form (ngSubmit)="editStudent()" [formGroup]="studentEditForm" name="myForm">
                <div class="mb-3">
                  <label for="roll-no" class="form-label">Roll No.</label>
                  <input type="number" class="form-control" id="roll-no" name="rollno" formControlName="rollno" value="{{student.rollNo}}" placeholder="{{student.rollNo}}" autocomplete="off" required>
                </div>
                <div class="mb-3">
                  <label for="name" class="form-label">Name</label>
                  <input type="text" class="form-control" id="name" name="name" formControlName="name" value={{student.name}} required>
                </div>
                <div class="mb-3">
                    <label for="email" class="form-label">Email address</label>
                    <input type="email" class="form-control" id="email" name="email" formControlName="email" value={{student.email}} required>
                </div>
                <div class="mb-3">
                    <label for="score" class="form-label">Score</label>
                    <input type="number" class="form-control" id="score" name="score" formControlName="score" value={{student.score}} required>
                </div>
                <button type="submit" class="btn btn-primary" ng-click="submitForm(myForm.$valid)">Submit</button><button type="submit" class="btn btn-dark mx-4">Clear</button>
            </form>
        </div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
</div>

In Input Tag, I want to use value attribute so I can get a default value but I get Empty fields and I think it is because formControlName is controlling the data in my form. Is there a way to get pre-populated data using value attribute along with formControlName attribute?

Placeholder attribute works fine but I want a default value.

You need to set your default value as the initial value of the formControl — gavgrif
– gavgrif, Commented Oct 3, 2022 at 6:01

Eli Porush · Accepted Answer · 2022-10-03 06:02:33Z

2

if you want a default value simply initialize the form with values, for example:

form = new FormGroup({
    name: new FormControl('defaultNameValue'),
    email: new FormControl('defaultEmailValue')
})

answered Oct 3, 2022 at 6:02

Eli Porush

1,5772 gold badges11 silver badges20 bronze badges

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

Comments

jitender · Accepted Answer · 2022-10-03 06:08:03Z

1

You should be doing it in you component instead of using value attribute. While defining the form example

studentEditForm= new FormGroup({
    rollNo: new FormControl(this.student.rollNo)
})

or if student data is not available at the time of definition then use formcontrol.setValue after you initialize the student data something like

this.studentEditForm.controls.rollNo.setValue(this.student.rollNo)

answered Oct 3, 2022 at 6:08

jitender

10.4k1 gold badge21 silver badges49 bronze badges

Comments

Amer · Accepted Answer · 2022-10-03 06:11:29Z

1

Using the value and the CVA (Control Value Accessor: formControlName, formControl, and ngModel) to control the value of the input will override each other each time you change anyone of them.

Instead, it's better to rely only on one of them. If the CVA is used, then you can pass an initial value (default value) to the form-control while defining it:

studentEditForm = new FormGroup({
  score: new FormControl(YOUR_INITIAL_VALUE),
});

For more info, check here how Angular passes the value from CVA to the value property when using both of them: default_value_accessor.ts

edited Oct 3, 2022 at 6:11

answered Oct 3, 2022 at 6:05

Amer

6,7442 gold badges11 silver badges36 bronze badges

Comments

Bansi29 · Accepted Answer · 2022-10-07 03:55:56Z

1

Used value and CVA to control value

try this :

studentEditForm = new FormGroup({
   score: new FormControl(VALUE),
});

edited Oct 7, 2022 at 3:55

Bansi29

1,0797 silver badges24 bronze badges

answered Oct 3, 2022 at 6:09

khodidas patel

135 bronze badges

1 Comment

ethry Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How to use input field value attribute while using formControlName? [Angular]

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related