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

我试图创建以下模板驱动的形式从角6魁德

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

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

因为我的模型还没有创建

我知道我可以通过从web服务获取数据在

edit

模式下创建模型，但在

create

模式下，我无法创建

model

对象，因为

user

属性是必需的：

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

    }
}

---

我错过了什么？

不要使用

model.id

|

model.name

但只使用

id

|

name

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

---

:

@组件({
选择器：“我的应用程序”，
模板：`


id的输出：{{id}
用户的输出：{{user}
id的输出：{{this.id}
用户的输出：{{this.user}

将用户名更改为Dave
`
})
类AppComponent{
id='a'；
用户='b'；
setUser（名称：string）{
this.user=名称；
}
}

它对我不起作用，我不明白它应该如何工作。

id

和

name

是否与模型有某种关联？如果

id

和

name

将是FormComponent类的属性，那么它可以工作。然后在表单提交后，我可以从

this.id

和

this.name

获取值，但这些变量与模型无关。@反之，它们与您正在使用的组件相关。NgModel是一种角度属性，它可以使场景从html更改为js值（在组件中），反之亦然。在实践中，这意味着如果您更改具有

ngmodel

属性的输入中的值，它将在组件中更改。我将向您发送代码笔，这将有助于理解edit.OK中的内容，因此在

edit

的情况下，我们会立即创建一个模型，但在

的情况下，只有在表单提交后才能创建
表单。当你们开始学习时，指南似乎有点误导你们。谢谢你，奇弗！我的意思是，只有在表单提交之后，我们才能使用
this.id
，
this.user
属性的值创建模型的实例（
form
class），因为在此之前，我们没有所需属性
user
的值。所以，这种方法需要在FormComponent中具有可选的双重属性，在model中具有必需的双重属性？看起来很奇怪。你不必复制任何东西，你至少有两个选择。1.您可以将其包装到组件中（如果这不是一个过度使用），并将其作为
@Input
传递。或者您可以使用类似于
*ngIf=“iHaveAnUserAndImShowingInputs”
（您将使用该
*ngIf
将您的输入打包到
ng containter
）的内容。另外，我很抱歉花了这么长时间才做出响应。
<input type="hidden" name="id" [(ngModel)]="id">
<input type="text" name="user" required [(ngModel)]="user">

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

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

@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;
  }
}