发表于： 2019-11-02 21:36:26
1 1241
今天完成的事情：
了解angular表单的写法
明天计划的事情：
整理下之前CSS常用代码
遇到的问题：
无
收获：
这是已经精简过 的代码:
<form nz-form [nzLayout]="'inline'" [formGroup]="validateForm" >
<nz-form-item>
<nz-form-control nzErrorTip="请填写">
<input formControlName="userName" nz-input placeholder="Username" />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control nzErrorTip="请贴写">
<input formControlName="password" nz-input type="password" placeholder="Password" />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<button nz-button nzType="primary" [disabled]="!validateForm.valid">Log in</button>
</nz-form-item>
</form>
TS文件
validateForm: FormGroup;
private fb: FormBuilder
//表单验证
this.validateForm = this.fb.group({
userName: [null, [Validators.required]],
password: [null, [Validators.required]],
remember: [true]
});
康奈尔笔记模板 | |
| 线索Cues | 自己的理解 |
| import { ReactiveFormsModule } from '@angular/forms'; | 首先如果你想要用这个UI组件需要先引进一个模块ReactiveFormsModule 模块，刚开始由于不太清楚直接引入组件出现报错，结果看了angular表单说需要引进响应式表单。 文档解释是提供一种模型驱动方式法来处理其值随时间变化的表单输入 |
| [nzLayout] | 表单布局：就是让2个输入框 左右排列 如果删除就是默认上下排列这个排列方式只是在form标签里面有效 |
| formControlName | |
| placeholder | 这个是在输入框默认文字的如图   |
| required属性 | 这个是输入框的一个规定，规定是必须在输入框填写类容 |
nzType | 这个是设置按钮可选类型的 设置按钮类型，可选值为 primary ,dashed ,danger 或者不设 按钮有四种类型：主按钮、次按钮、虚线按钮、危险按钮。主按钮在同一个操作区域最多出现一次。 |
FormBuilder | 使用用户指定的配置创建 AbstractControl, FormBuilder 提供了一个语法糖，以简化 FormControl、FormGroup 或 FormArray 实例的创建过程。 它会减少构建复杂表单时所需的样板代码的数量。 他有3个方法，group()，control(),array() |
group() | 定义一个可以并行运行的动画步骤列表。 当一系列样式分别需要在不同的起始时间开始动画并在不同的结束时间停止时，分组动画非常有用。 |
| disabled | 带有一个禁用输入字段的 HTML 表单， 代码 [disabled]="!validateForm.valid" 通过判断来生效 |
| 总结 | |
userName: [null, [Validators.required]], password: [null, [Validators.required]], remember: [true] required表示必填写，通过带有一个禁用输入字段的 HTML 表单， 代码 [disabled]="!validateForm.valid" 通过判断来生效 | |
返回列表
评论