Невозможно заполнить угловую форму, используя ngModel и Model Object - PullRequest
Новая
       21

Невозможно заполнить угловую форму, используя ngModel и Model Object

0 голосов
/ 09 апреля 2019

Я практикую Angular Framework для веб-разработки.Тем временем я использовал модель класса user.ts: 

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

и 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','gul@test.com',723893, '', 'morning', false);
}

Теперь я использую 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>

В этом коде я использую tempForm в качестве ngForm, чтобы показать введенное значение как форму, управляемую шаблоном, в то время как я {{user | json}} труба для печати значения объекта модели.Я заполнил модель в app.component.ts, но здесь она не показывает элементы управления, заполненные этими значениями.

И вторая проблема заключается в том, что {{name.class}} для просмотра классов, используемых элементом управления, они работали только с формами, управляемыми моделями?

Я также импортировал FormsModule, чтобы не было ошибки:

app.module.ts: 

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

1 Ответ

1 голос
/ 09 апреля 2019

Прямо сейчас ваш form связывает экземпляр user в вашем компоненте, но его свойства не видны ему.

Вам необходимо определить свойства класса User как public чтобы они были видны за пределами класса.

Пример: 

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

Вот пример рабочего стекаблика на основе вашего кода: https://stackblitz.com/edit/angular-uqcekz

...