Can't populate angular form using ngModel and Model Object

Question

I have been practicing Angular framework for web development. Meanwhile I have used a model class user.ts:

 export class User {
    constructor(
        username: string,
        email: string,
        phone: number,
        choice: string,
        timePreference: string,
        promotional: boolean
    ){}
}

and the app.component.ts:

    import { Component } from '@angular/core';
import { User } from './user';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  topics=['angular','react','veu'];

  user = new User('Gull','[email protected]',723893, '', 'morning', false);
}

Now I am using app.component.html:

<div class="container-fluid">
  <h1>Bootcamp enrollment form</h1>
  <form action="" #tempForm="ngForm">

    {{tempForm.value | json}}

    <!-- {{title}} -->
    <hr/>

    {{user | json}}

    <div class="form-group">
      <Label>Name:</Label>
      <input type="text" #name class="form-control" name="userName" [(ngModel)]="user.username">
    </div>
    {{name.class}}
    <div class="form-group">
      <Label>Email:</Label>
      <input type="email" class="form-control" [(ngModel)]="user.email" name="emailAddress">
    </div>

    <div class="form-group">
      <Label>Phone:</Label>
      <input type="tel" class="form-control" [(ngModel)]="user.phone" name="phone">
    </div>

    <div class="form-group">
      <select name="choice" id="" class="custom-select" [(ngModel)]="user.choice" >
        <option value="">I am selected here</option>
        <option *ngFor="let top of topics">{{top}}</option>
      </select>
    </div>

    <div class="mb-3">
      <label for="">Time preference</label>
      <div class="form-check">
        <input type="radio" class="form-check-input" value="morning" name="timePreference" [(ngModel)]="user.timePreference">
        <label for="timePreference">Morning</label>
      </div>

      <div class="form-check">
        <input type="radio" class="form-check-input" value="evening" name="timePreference" [(ngModel)]="user.timePreference">
        <label for="timePreference">Evening</label>
      </div>

      <div class="form-check">
        <input type="checkbox" class="form-check-input" value="offers" name="promotional" [(ngModel)]="user.promotional">
        <label for="promotional">Send me promotional offers</label>
      </div>
    </div>
    <button class="btn btn-primary">Submit</button>
  </form>
</div>

In this code I am using tempForm as ngForm to show the entered value as template driven form, while I am {{user | json}} pipe for printing the value of model object. I have populated the model in app.component.ts, but here it didn't shows the controls populated with these values.

And the second problem is that {{name.class}} to see classes used by a control, did they work only with model driven forms?

I have also imported the FormsModule so that is not the error:

app.module.ts is:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,    
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ashish.gd · Accepted Answer · 2019-04-09 11:26:25Z

2

Right now your form is binding the user instance in your component but it's properties are not visible to it.

You need to define the User class properties as public for them to be visible outside the class.

Example:

export class User {
    constructor(
        public username: string,
        public email: string,
        public phone: number,
        public choice: string,
        public timePreference: string,
        public promotional: boolean
    ){}
}

Here is a working stackblitz example based on your code: https://stackblitz.com/edit/angular-uqcekz

answered Apr 9, 2019 at 11:26

ashish.gd

1,7781 gold badge14 silver badges26 bronze badges

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

1 Comment

Gul Shair Butt Over a year ago

Thanks so much. I love it. Such a blessing for developers especially for beginners.

Collectives™ on Stack Overflow

Can't populate angular form using ngModel and Model Object

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related