使用带有模板驱动表单的控件答案

【问题标题】：Using controls with template-driven forms angular使用带有模板驱动表单的控件
【发布时间】：2020-03-16 19:53:51
【问题描述】：

我正在尝试在 Angular 中使用 NGForm，但我不明白的是使用 ngForm 控件

谢谢

stackblitz：https://stackblitz.com/edit/angular-gt66nu

这是一个例子：

app-component.html

<form name="form" #f="ngForm">

<div>
    <label>name</label>
    <input name="name" [(ngModel)]="model.name">
</div>
    <div>
        <label>surname</label>
        <input name="surname" [(ngModel)]="model.surname">  
    </div>


 </form>

app-component.ts

import { Component, AfterViewInit,ViewChild } from '@angular/core';
import {NgForm} from '@angular/forms'

@Component({
selector: 'my-app',
templateUrl: 'app.component.html'
})

export class AppComponent implements AfterViewInit {
model: any = {};
oldForm;
@ViewChild('f', {static: false}) form: NgForm
onSubmit() {
 alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.model))
}

ngAfterViewInit() {
     this.oldForm = this.form.controls
     console.log('form: ',this.form);
     this.form.form.valueChanges.subscribe( item => {
       console.log('item: ' ,item);
     })
   }
 }

控制台

【问题讨论】：

有什么问题？

标签： angular forms controls

【解决方案1】：

查看Angular NgForm docs 或查看Template-driven Forms 的Angular 教程。

NgForm：指令

创建顶级 FormGroup 实例并将其绑定到要跟踪的表单聚合表单值和验证状态。

简单示例：

import {Component} from '@angular/core';
import {NgForm} from '@angular/forms';

@Component({
  selector: 'example-app',
  template: `
    <form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
      <input name="first" ngModel required #first="ngModel">
      <input name="last" ngModel>
      <button>Submit</button>
    </form>

    <p>First name value: {{ first.value }}</p>
    <p>First name valid: {{ first.valid }}</p>
    <p>Form value: {{ f.value | json }}</p>
    <p>Form valid: {{ f.valid }}</p>
  `,
})
export class SimpleFormComp {
  onSubmit(f: NgForm) {
    console.log(f.value);  // { first: '', last: '' }
    console.log(f.valid);  // false
  }
}

【讨论】：