[Angular2 Form] Reactive form: valueChanges, update data model only when form is valid
is Data model update Form when Only valid
2023-09-14 08:59:19 时间
For each formBuild, formControl, formGroup they all have 'valueChanges' prop, which is an Observable.
reactiveForm: FormGroup; video: Video; constructor(fb: FormBuilder) { this.reactiveForm = fb.group({ // title <-- formControlName="title" title: [ 'Title', // <-- Default value [ Validators.required, Validators.minLength(3) ] // <-- Validations ], duration: [ 0, [ Validators.required, Validators.pattern('[0-9]+') ] ], description: [ 'Description', [Validators.required] ] }); this.reactiveForm.valueChanges .filter( x => this.reactiveForm.valid) .map(value => new Video(value.title, value.duration, value.description)) .do(formValue => console.log(formValue)) .subscribe((video) => { this.video = video; })
class Video { constructor( private title: string, private duration: number, private description: string ){ } }
If you want to only update form data model when form is valid, you can do:
.filter( x => this.reactiveForm.valid)
Reactive form is very useful when you want to do some background task without block user in the ui.
相关文章
- Win7提示1970-01-01 000000 is not a valid data怎么办.
- [ Talk is Cheap Show me the CODE ] : jQuery Mobile工具栏
- [React Testing] Use Generated Data in Tests with tests-data-bot to Improve Test Maintainability
- 【39】警告Device contains calibration data of version 1437204487 which is not supported in this version
- 'System.Data.DataRow.DataRow(System.Data.DataRowBuilder)' is inaccessible due to its protection leve
- how is table select_all_icon being loaded
- when is json data formatted in gateway
- CL_FXS_URL_DATA_FETCHER - a good utility to fetch picture binary data according to url
- what is conversion exit defined in ABAP domain
- pricing data of Service order is copied from BP master data
- How product extension field is involved in search scenario
- How is SAP CRM One Order item object type determined
- Spring源码研究之how is returned hello string converted to jsp page
- 'System.Data.DataRow.DataRow(System.Data.DataRowBuilder)' is inaccessible due to its protection leve
- 【2017 Multi-University Training Contest - Team 2】Is Derek lying?
- getFilterFromRunTimeService - what is the trigger point of data load
- 成功解决TypeError: ‘int‘ object is not callable
- 已解决Script file ‘E:anacondainstall_rootScriptspip-script.py‘ is not present.
- ChatGPT 是传统搜索引擎的终结?——Web3 创新 | Is ChatGPT The End Of Traditional Search Engines—Web3 Innovation
- 一切系统都是分布式的:Everything is distributed
- nested exception is org.apache.ibatis.type.TypeException: Could not set parameters for mapping错误的决方法
- uni-app的Vue项目中Echarts的报错提示:[Vue warn]: Error in data(): “ReferenceError: echarts is not defined“
- Public Key Retrieval is not allowed(不允许公钥检索)【解决办法】
- 【Bug解决】ROM is missing for pong, see https://github.com/openai/atari-py#roms for instructions