Question

我一直在练习Web开发的Angular框架。同时，我使用了模型类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 { }

Answer 1

现在，您的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
    ){}
}

这是一个基于您的代码的有效的stackblitz示例：https://stackblitz.com/edit/angular-uqcekz

无法使用ngModel和Model Object填充角度形式

1 个答案: