Question

我正在第一次测试Angular ...构建表单，并且注意到我可以将UserModel从视图传递到组件（控制器），而无需{{1} }标签。

我已经看到了同时使用两者的示例，但我想知道为什么在我似乎不需要它时为什么要使用它。在这里我很容易做出很多错误的假设，所以请纠正我。

HTML：

<form>

TypeScript：

<div class="grid-container">
  <h1 class="mat-h1">Account</h1>
  <div class="form-container">
    <mat-form-field appearance="outline">
      <mat-label>First Name</mat-label>
      <input matInput placeholder="First Name" [(ngModel)]="model.firstName">
    </mat-form-field>

    <mat-form-field appearance="outline">
      <mat-label>Last Name</mat-label>
      <input matInput type="text" placeholder="Last Name" [(ngModel)]="model.lastName">
    </mat-form-field>    
  </div>
  <button mat-button type="submit" (click)="submitForm(model)" color="primary">Save Settings</button>
</div>

p.s。我试图使它在StackBlitz中工作，但不断出现大量与材料参考相关的错误。不知道我还缺少什么来工作。 Here it is anyway。

Answer 1

您使用的方法可能不会让您头痛，因为它通常适用于简单表单。

但是，Angular有一种特殊的方式可以处理表单。 Angular Forms为您提供了许多不错的功能，例如表单验证，用于这些验证的特殊CSS类，跨HTML元素共享信息等。据我所知，Angular Form必须包装在

Answer 2

只需将此代码添加到您的app.component.ts中，名称下面就是定义

    model = {
    firstName:null,
    lastName:null
  }submitForm(model){
    console.log(model)
  }

因为可以在Angular中传递模型，我是否真的需要<form>标签？

2 个答案: