Question

我正在尝试根据模板驱动的Froms Angular 6 quide创建表单。

假设我有一个包含两个字段和适当模型的表单：

<input type="hidden" name="id" [(ngModel)]="model.id">
<input type="text" name="user" required [(ngModel)]="model.user">

如果我尝试以create模式运行此类应用程序，则会收到错误消息：

ERROR TypeError: Cannot read property 'id' of undefined

因为我的模型仍然没有创建。

我知道我可以通过从Web服务获取数据来以edit模式创建模型，但是在create模式下，我不能创建model对象，因为user该属性为必填项：

export class Form {
    constructor(
        public id: number | undefined,
        public user: User
    ) {

    }
}

我想念什么？

Answer 1

请勿使用model.id || model.name，但只有id || name

<input type="hidden" name="id" [(ngModel)]="id">
<input type="text" name="user" required [(ngModel)]="user">

还必须导入

import {FormsModule} from '@angular/forms';

到您的app.module.ts

import {FormsModule} from '@angular/forms';
...

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

Example：

@Component({
  selector: 'my-app',
  template: `
   <input type="text" name="id" [(ngModel)]="id"><br>
   <input type="text" name="user" required [(ngModel)]="user">

   <div>Outputs for id: {{id}}</div>
   <div>Outputs for user: {{user}}</div>

    <!-- this will have same result --> 

   <div>Outputs for id: {{this.id}}</div>
   <div>Outputs for user: {{this.user}}</div>

   <hr/>

   <button (click)="setUser('Dave')">Change username to Dave</button>
  `
})
class AppComponent {  
  id = 'a';
  user = 'b';

  setUser(name: string) {
    this.user = name;
  }
}

在Angular 6上创建/编辑模板表单

1 个答案: