angular 10 直接获取表单值

在一些情况下只需要简单的获取表单的值，而不需要做一些不必要的值定义

例如：

列表的搜索框，

当然可以一个一个的值进行定义，通过绑定

public keywords = '';

html

<input [(ngModel)]="keywords">

但这种情况值是始终保持和输入一直，但并不能同时保持和搜索结果的条件一直。

这时我想到了直接获取搜索表单

html

<form (ngSubmit)="tapSearch(searchForm.value)" #searchForm="ngForm">
    <div class="input-group">
        <label for="keywords">标题</label>
        <input type="text" class="form-control" name="keywords" ngModel id="keywords" placeholder="搜索标题" [value]="keywords">
    </div>
    <button type="submit" class="btn btn-primary">搜索</button>
</form>

1234567

public keywords = '';

public tapSearch(form: any) {
    this.keywords = form.keywords || '';
    // TODO
}

123456

这里需要注意

html

(ngSubmit)="tapSearch(searchForm.value)" #searchForm="ngForm"

#searchForm="ngForm" 是获取表单对象

<input name="keywords" ngModel [value]="keywords">

ngModel 进行绑定键值，必须的，不然在 searchForm.value 中无法获取到值

searchForm.value 的具体值为

{
    keywords: ''
}

123

转载请保留原文链接： https://zodream.cn/blog/id/190.html

Cookie	有效期	说明
cookie_policy	11个月	Cookie 插件设置 Cookie 的目的是存储用户对使用 Cookie 的同意；它不会存储任何个人数据。
PHPSESSID	11个月	用于绑定用户登录凭证的 Cookie 标识
XSRF-TOKEN	11个月	用于防止跨站脚本攻击的 Cookie 标识