(ngModel)] input with default input values

Question

i've got an input field and i want so set default values. But with ngModel the input fields are just empty. How do i set default values which the user can change?

<div class="control">
 <input #name="ngModel" [(ngModel)]="message.name" name="name" class="input" type="text" value="{{data.name}}" required>
 <p class="help is-danger" *ngIf="name.touched && name.invalid">This field is required</p>
</div>
 <button (click)="saveEdit()" [disabled]="!(name.valid)">Save</button>

i'm not very experienced in angular/webdev...

Thank you!

Solution:

Add

  ngAfterViewInit() {
    this.message.name = this.data.name
}

to ts.component

In ngAfterViewInit() you can set the message.name value and it will be bind in the html input field. — Marco
– Marco, Commented Jan 23, 2021 at 22:03
Can you accept the answer of @Shivansh Sethas it tells the same things as me ? — Marco
– Marco, Commented Jan 24, 2021 at 8:19

Shivansh Seth · Accepted Answer · 2021-01-25 09:36:20Z

1

<input [(ngModel)]="message.name" name="name" class="input" type="text" required>

In your component :

message : any = { name: 'YOUR_DEFAULT_VALUE', }

edited Jan 25, 2021 at 9:36

answered Jan 24, 2021 at 5:54

Shivansh Seth

3611 silver badge8 bronze badges

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

1 Comment

J L Over a year ago

that solution is working. Im gonna keep this one instead of using the ngAfterViewInit(). Thanks!

Sulove Dahal · Accepted Answer · 2021-01-23 22:16:31Z

0


 <input  [(ngModel)]="message" name="name" class="input" type="text"required>

In your Typescript file Add message = 'defaultvalue'

answered Jan 23, 2021 at 22:16

Sulove Dahal

2211 gold badge4 silver badges15 bronze badges

1 Comment

J L Over a year ago

this one is not working because message is an object. See @Shivansh Seth solution, which is almost the same. TY!

Collectives™ on Stack Overflow

(ngModel)] input with default input values

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related