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