How can I add default value in input in the dynamic template-driven forms

Question

Below is the sample of template driven form in angular 6 which is dynamic and it could be any number of form. So I don't want to create and use variable in class something like [(ngModel)]="anyVariable". If I write value="Rakesh" in the form then it is not showing.

So, How can I set default value of firstName and lastName input?

<form #paxForm="ngForm" name="passengerForm" novalidate>

    <label>First name*</label>
    <input type="text" value="Rakesh" name="firstName" ngModel/>

    <label>Last name*</label>
    <input type="text" value="" name="lastName" ngModel required/>

    <label>Mobile number*</label>
    <input type="tel" name="mobileNumber" value="" ngModel required/>

    <input type="button" value="Submit" (click)="submitPaxForm(paxForm)"/>
</form>

Return Value:

paxForm:{
    value:{
        mobileNumber: "97987987",
        firstName: "rakesh",
        lastName: "pal"
    }
}

can you make a stackblitz with your example ?

Alann
– Alann

2018-11-28 10:19:28 +00:00
Commented Nov 28, 2018 at 10:19 — Alann
– Alann, Commented Nov 28, 2018 at 10:19

benshabatnoam · Accepted Answer · 2018-11-28 10:40:21Z

1

Simple as that:

<input type="text" name="firstName" ngModel="Rakesh"/>

https://stackblitz.com/edit/so-53517039

answered Nov 28, 2018 at 10:40

benshabatnoam

7,7403 gold badges37 silver badges55 bronze badges

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

Comments

Muhammed Albarmavi · Accepted Answer · 2018-11-28 10:59:16Z

I did something like this by relay on two way data binding so it's easy for me to get all forms values

consider this example

AppComponent

  formsValues=[
    {
        mobileNumber: "97987987",
        firstName: "rakesh",
        lastName: "pal"
    } , 
    {
        mobileNumber: "2233556",
        firstName: "sam",
        lastName: "well"
    }
  ]

Template

<div *ngFor="let frm of  formsValues" class="form">
    <label>First name*</label>
    <input type="text" value="Rakesh" name="firstName" [(ngModel)]="frm.firstName"/>

    <label>Last name*</label>
    <input type="text" value="" name="lastName" [(ngModel)]="frm.lastName" required/>

    <label>Mobile number*</label>
    <input type="tel" name="mobileNumber" value="" [(ngModel)]="frm.mobileNumber" required/>
    <input type="button" value="Submit" (click)="submitPaxForm(frm)"/>
</div>

demo stackblitz

but I think reactive form array is much better for your case

Gini · Accepted Answer · 2021-05-24 12:46:08Z

0

I had a similar issue. Got it fixed by directly aasigning the default value to ngModel.

Example:

'<form  #userData="ngForm" (ngSubmit)="getData(userData.value)">
     <div class="fields">
     <label>Building</label><input class="form-control" type="text" id='building' 
     name='building' ngModel='1234'>
     <label>Floor</label><input class="form-control" type='text' id='floor' 
     name='floor' ngModel='2'>
     </div>
     <button type="submit">Submit</button>
     </form>'

edited May 24, 2021 at 12:46

answered May 24, 2021 at 12:40

Gini

851 silver badge9 bronze badges

Collectives™ on Stack Overflow

How can I add default value in input in the dynamic template-driven forms

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related