我一直在练习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 { }
答案 0 :(得分: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