Angular表单

模板驱动型表单:所有逻辑都在html中,包括数据校验逻辑和变量定义都在html中。

响应式表单:把功能性的内容移到了代码里面。

动态表单:表单几乎全部是用代码创建的。

 

模板驱动表单:

#form="ngForm"

#password="ngModel"

 

响应式表单:

formBuilder

 

动态表单:
html仅仅充当容器的作用,大部分逻辑都在class里。

有些业务表单根据用户权限的不同,根据用户角色的不同,能够让用户输入不同的内容。

 

 

 

数据校验:

  • required
  • requiredTrue
  • minLength
  • maxLength
  • pattern
  • nullValidator
  • compose
  • composeAsync

自定义校验规则:

自定义校验规则,实际上是实现了一个指令。

 

模板驱动表单例子 

 

 

<form #f=ngForm (ngSubmit)="onSubmit(f,$event)">
    <div mat-dialog-content>
        <mat-form-field class="full-width">
            <input [(ngModel)]="desc" required type="text" matInput placeholder="在这里快速简历一个任务" style="text-align: right"
                name="desc">
            <button matSuffix mat-icon-button type="submit">
                <mat-icon>send</mat-icon>
            </button>
            <mat-error>不能为空</mat-error>
        </mat-form-field>
    </div>
</form>

<div>
    表单数据:{{f.value | json}}
</div>

<div>
    表单验证状态:{{ f.valid | json }}
</div>
onSubmit(f: NgForm, event: Event) {
    console.log(f)
    console.log(JSON.stringify(f.value));
    console.log(JSON.stringify(f.valid))
}

 

2020-06-02

如果觉得本文对您有帮助~可以支付宝(左)或微信支持一下:


看到小伙伴打赏时给我写一些鼓励的话,真的非常感动,谢谢你们。


我开了个微信公众号(第三个二维码)用来分享自己的职场英语相关学习经验,感兴趣可以关注,我会不断更新~


微信打赏微信公众号

posted @ 2021-02-16 16:51  starof  阅读(60)  评论(0编辑  收藏  举报