Fork Me On Github

angular 10 直接获取表单值

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

例如:

  1. 列表的搜索框,

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

public keywords = '';
<input [(ngModel)]="keywords">

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

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

<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>
public keywords = '';

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

这里需要注意

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

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

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

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

searchForm.value 的具体值为

{
    keywords: ''
}
点击查看全文
标签: angular
0 34 0
组件事件的两种定义方式:通常方式,使用 `@Output()`方式,非正常方式,使用 `@Input()`方式
在angular中实现文件下载自动获取响应头中的文件名,怎么获取响应头
angular 11 返回上一页保留页面数据页面内容不变
响应式表单,FormGroup中嵌套FormGroup,或嵌套FormArray
ngrx/effects 感觉没什么用