angular - 使用带有模板驱动表单的控件
问题描述
我正在尝试以角度使用 NGForm,但我不明白的是使用 ngForm 控件
谢谢
堆栈闪电战: https ://stackblitz.com/edit/angular-gt66nu
这是一个例子:
应用组件.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>
应用组件.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 NgForm 文档或查看模板驱动表单的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
}
}
推荐阅读
- c - scanf 注册新的转换说明符
- java - 为什么我的应用程序图标在 android studio 的应用程序网格列表中显示为空白?
- utf-8 - 如何使用 HiveQL 提取表情符号?
- c# - 用 3 个字符月份转换字符串日期
- python - 在不支持步幅的情况下有效地将卷积滤波器转换为带状矩阵
- javascript - Cordova 找不到插入式 OTG 设备
- python - Simple_Salesforce 动态批量查询
- mongodb - 如何通过 Postman 将 ISODate 插入 mongoDB?
- c++ - 类和对象实践
- e2e-testing - 长时间延迟(5 分钟)后显示的 UI 功能的端到端测试