Angular: text input won't set to a default value

Question

I have this 'Username' input:

<div class="form-group"> 
    <label for="userName">Username</label>
    <input name='userName' ngModel id="userName" type="text" 
           ng-model="userName"   init="userName='Bob'" value="Bob" >
</div>

I want to set the input to 'Bob' by default but this doesn't work. If i delete 'ngModel' it works and I need it otherwise it won't sent my username to server.

This is in the begging of the form(the action that happens when I press submit button):

<form #physicians="ngForm" (ngSubmit)="onFormSubmit(physicians.value)">

And this the controller:

onFormSubmit(data) {
    console.log(data);
    this.adminService.updateUser(data).subscribe((responseData: any) => {
        this.router.navigate(['/']);
   },
   (err: HttpErrorResponse) => {
       this.isSignupError = true;
       this.errorText = err.error['message'];
   });
}

How can I fix this?Thank you!

which angular version you are using

harkesh kumar
– harkesh kumar

2018-09-17 10:38:38 +00:00
Commented Sep 17, 2018 at 10:38 — harkesh kumar
– harkesh kumar, Commented Sep 17, 2018 at 10:38
Angular 6 is what I use.

Alex
– Alex

2018-09-17 10:39:06 +00:00
Commented Sep 17, 2018 at 10:39 — Alex
– Alex, Commented Sep 17, 2018 at 10:39
then why not you use formcontrolname

harkesh kumar
– harkesh kumar

2018-09-17 10:40:25 +00:00
Commented Sep 17, 2018 at 10:40 — harkesh kumar
– harkesh kumar, Commented Sep 17, 2018 at 10:40
I don't know exactly how. I google it now.

Alex
– Alex

2018-09-17 10:41:19 +00:00
Commented Sep 17, 2018 at 10:41 — Alex
– Alex, Commented Sep 17, 2018 at 10:41
let me give you code for that

harkesh kumar
– harkesh kumar

2018-09-17 10:41:53 +00:00
Commented Sep 17, 2018 at 10:41 — harkesh kumar
– harkesh kumar, Commented Sep 17, 2018 at 10:41

Lia · Accepted Answer · 2018-09-17 10:51:05Z

2

you should do something like:

ts code:

export class AppComponent  {
  userName;
  constructor() {
    this.userName = 'Bob';
  }
}

html:

 <form #form="ngForm" novalidate>
    <label>userName:</label>
    <input type="text" name="userName" [(ngModel)]="userName" required minlength="2" maxlength="10" #userNameDir="ngModel">
    <pre>errors: {{userNameDir.errors | json}}</pre>
  <button type="button" [disabled]="form.invalid" (click)="onFormSubmit(form.value)">submit</button>
  <pre>form.value: {{form.value | json}}</pre>
  <pre>form.errors: {{form.errors | json}}</pre>
  <pre>form.status: {{form.status | json}}</pre>
  <pre>form.dirty:{{form.dirty | json}}</pre>
</form>

DEMO.

edited Sep 17, 2018 at 10:51

answered Sep 17, 2018 at 10:43

Lia

12k3 gold badges36 silver badges53 bronze badges

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

Comments

Dominik Brázdil · Accepted Answer · 2021-05-26 09:51:37Z

1

You can use

[defaultValue]="myDefaultValue"

without Angular changing the variable 'myDefaultValue' on the input change.

answered May 26, 2021 at 9:51

Dominik Brázdil

5324 silver badges13 bronze badges

Comments

sah1 · Accepted Answer · 2018-09-17 10:45:19Z

0

Try using the following code: HTML:

<input name='userName'  id="userName" type="text" [(ngModel)]="userName">

TS:

userName='Bob' // when you have declared the variable

answered Sep 17, 2018 at 10:45

sah1

4001 gold badge7 silver badges25 bronze badges

Comments

harkesh kumar · Accepted Answer · 2018-09-17 10:46:47Z

0

 <form [formGroup]="physicians" (ngSubmit)="onSubmit(physicians.value)">
<div class="form-group"> 
            <label for="userName">Username</label>
            <input  name='userName'  type="text"  formControlName="userName"  >
     </div>

TS FILE code

Put this in ngOnInit

this.physicians= this._formBuilder.group({
      userName:['bob']
})



onFormSubmit(data) {
console.log(data);
 this.adminService.updateUser(data).subscribe((responseData: any) => {
  this.router.navigate(['/']);
},
(err: HttpErrorResponse) => {
  this.isSignupError = true;
  this.errorText = err.error['message'];
});

answered Sep 17, 2018 at 10:46

harkesh kumar

9032 gold badges14 silver badges35 bronze badges

Comments

sabrine abdelkebir · Accepted Answer · 2018-09-17 11:52:51Z

0

you can add this.userName = 'Bob'; in the file .ts , remove init and value='Bob' from html.

answered Sep 17, 2018 at 11:52

sabrine abdelkebir

834 bronze badges

Collectives™ on Stack Overflow

Angular: text input won't set to a default value

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