CODEWITHSUNDEEP
angularangular-formsngmodel
Gul Shair Butt
Gul Shair Butt

Reputation: 149

Can't populate angular form using ngModel and Model Object

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 { }

Upvotes: 1

Views: 1450

Answers (1)

ashish.gd
ashish.gd

Reputation: 1768

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

Upvotes: 2

Related Questions