This article mainly introduces the relevant information of Angular19 custom form controls. It is very good and has reference value. Friends in need can refer to it
1 Requirements
When developers need a specific form control, they need to develop a control similar to the default provided form control as a form control; custom form controls must consider the relationship between the model and the view How to interact with data
2 Official Document-> Click to go
Angular The ControlValueAccessor interface is provided for developers to assist developers in building custom form controls. Developers only need to implement the methods in the ControlValueAccessor interface in the custom form control class to achieve data interaction between the model and the view
interface ControlValueAccessor { writeValue(obj: any): void registerOnChange(fn: any): void registerOnTouched(fn: any): void setDisabledState(isDisabled: boolean)?: void }
2.1 writeValue
writeValue(obj: any): void
This method is used to write values to elements in custom form controls;
This parameter value (obj) uses this The components of the custom form control are passed through the data binding of the template form or responsive form;
In the class of the custom form control, you only need to assign this value (obj) to a member variable. , the view of the custom form control will display this value through property binding
2.2 registerOnChange
registerOnChange(fn: any): void
registerOnChange will be triggered when the data of the custom form control changes Method, this method is used to handle changes in custom form control data;
The parameter (fn) received by the registerOnChange method is actually a method, which is responsible for processing the changed data
When since When the defined control data changes, the method executed by fn will be automatically called, but the usual approach is to customize a method propagateChange and let the custom method point to fn, so that when the data changes, you only need to call propagateChange to process the changed data
2.3 registerOnTouched
registerOnTouched(fn: any): void
The registerOnTouched method will be triggered when the form control is touched. The specific details will be updated...2018-1-31 11:18:33
2.4 setDisabledState
setDisabledState(isDisabled: boolean)?: void
To be updated...2018-1-31 11:19:30
3 Programming steps
3.1 Create a custom form control component
<p> <h4 id="当前计数为-countNumber">当前计数为:{{countNumber}}</h4> <br /> <p> <button md-icon-button (click)="onIncrease()"> <span>增加</span> <md-icon>add</md-icon> </button> <span style="margin-left: 30px;"></span> <button md-icon-button (click)="onDecrease()"> <span>减少</span> <md-icon>remove</md-icon> </button> </p> </p>
HTML
import { Component, OnInit } from '@angular/core'; import { ControlValueAccessor } from '@angular/forms'; @Component({ selector: 'app-counter', templateUrl: './counter.component.html', styleUrls: ['./counter.component.scss'] }) export class CounterComponent implements OnInit { countNumber: number = 0; constructor() { } ngOnInit() { } onIncrease() { this.countNumber++; } onDecrease() { this.countNumber--; } }
3.1.1 Function description
When you click the increase button, the current count will increase by 1. When you click the decrease button, the current count will be cut by 1
3.1. 2 When used directly in other components, an error will be reported
The error message is as follows:
The error message is Say the component we use
3.2 How to turn the
3.2.1 Implement the ControlValueAccessor interface
export class CounterComponent implements OnInit, ControlValueAccessor { countNumber: number = 0; constructor() { } ngOnInit() { } onIncrease() { this.countNumber++; } onDecrease() { this.countNumber--; } /**将数据从模型传输到视图 */ writeValue(obj: any): void { } /**将数据从视图传播到模型 */ registerOnChange(fn: any): void { } registerOnTouched(fn: any): void { } setDisabledState?(isDisabled: boolean): void { } }
3.2.2 Specify dependency information providers
import { Component, OnInit, forwardRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; @Component({ selector: 'app-counter', templateUrl: './counter.component.html', styleUrls: ['./counter.component.scss'], providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CounterComponent), multi: true } ] }) export class CounterComponent implements OnInit, ControlValueAccessor { countNumber: number = 0; constructor() { } ngOnInit() { } onIncrease() { this.countNumber++; } onDecrease() { this.countNumber--; } /**将数据从模型传输到视图 */ writeValue(obj: any): void { } /**将数据从视图传播到模型 */ registerOnChange(fn: any): void { } registerOnTouched(fn: any): void { } setDisabledState?(isDisabled: boolean): void { } }
3.2.3 Bug to be fixed
Although it can run normally, the elements in the form control cannot accept the form model passed in the component using the form control The data and the data changed by the form control cannot be returned to the form model in the component that uses the form control; in short, there is no data interaction between the model and the view
3.3 Practice the data interaction between the model and the view
3.3.1 Model to view
Refactor the writeValue method in the custom form control class
Tip 01: The parameters in the writeValue method are passed in through the data binding of the form using the component that uses the custom form control
3.3.2 View Go to the model
》Customize a method to handle the changed data in the custom form control
propagateChange = (_: any) => {};
》Reconstruct the registerOnChange method in the custom form control class
/**将数据从视图传播到模型 */ registerOnChange(fn: any): void { this.propagateChange = fn; }
》Call the custom method where the data changes
3.4 Custom form control component code summary
<p> <h4 id="当前计数为-countNumber">当前计数为:{{countNumber}}</h4> <br /> <p> <button md-icon-button (click)="onIncrease()"> <span>增加</span> <md-icon>add</md-icon> </button> <span style="margin-left: 30px;"></span> <button md-icon-button (click)="onDecrease()"> <span>减少</span> <md-icon>remove</md-icon> </button> </p> </p>
HTML
import { Component, OnInit, forwardRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; @Component({ selector: 'app-counter', templateUrl: './counter.component.html', styleUrls: ['./counter.component.scss'], providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CounterComponent), multi: true } ] }) export class CounterComponent implements OnInit, ControlValueAccessor { countNumber: number = 0; propagateChange = (_: any) => {}; constructor() { } ngOnInit() { } onIncrease() { this.countNumber++; this.propagateChange(this.countNumber); } onDecrease() { this.countNumber--; this.propagateChange(this.countNumber); } /**将数据从模型传输到视图 */ writeValue(obj: any): void { this.countNumber = obj; } /**将数据从视图传播到模型 */ registerOnChange(fn: any): void { /**fn其实是一个函数,当视图中的数据改变时就会调用fn指向的这个函数,从而达到将数据传播到模型的目的 */ this.propagateChange = fn; // 将fn的指向赋值给this.propagateChange,在需要将改变的数据传到模型时只需要调用this.propagateChange方法即可 } registerOnTouched(fn: any): void { } setDisabledState?(isDisabled: boolean): void { } }
3.5 Code summary of the component that uses custom form controls
技巧01:如果自定义表单控件和使用自定义表单控件的组件都在不在同一个模块时需要对自定义表单控件对应组件进行导出和导入操作
<p class="panel panel-primary"> <p class="panel-heading">面板模板</p> <p class="panel-body"> <h3 id="面板测试内容">面板测试内容</h3> </p> <p class="panel-footer">2018-1-22 10:22:20</p> </p> <p class="panel-primary"> <p class="panel-heading">自定义提取表单控件</p> <p class="panel-body"> <form #myForm=ngForm> <app-counter name="counter" [(ngModel)]="countNumber"> </app-counter> </form> <h6 id="绿线上是自定义提取的表单控件显示的内容">绿线上是自定义提取的表单控件显示的内容</h6> <hr style="border: solid green 2px" /> <h6 id="绿线下是使用自定义表单控件时表单的实时数据">绿线下是使用自定义表单控件时表单的实时数据</h6> <h3 id="表单控件的值为-myForm-value-nbsp-nbsp-json">表单控件的值为:{{myForm.value | json}}</h3> </p> <p class="panel-footer">2018-1-31 10:09:17</p> </p> <p class="panel-primary"> <p class="panel-heading">提取表单控件</p> <p class="panel-body"> <form #form="ngForm"> <p>outerCounterValue value: {{outerCounterValue}}</p> <app-exe-counter name="counter" [(ngModel)]="outerCounterValue"></app-exe-counter> <br /> <button md-raised-button type="submit">Submit</button> <br /> <p> {{form.value | json}} </p> </form> </p> <p class="panel-footer">2018-1-27 21:51:45</p> </p> <p class="panel panel-primary"> <p class="panel-heading">ngIf指令测试</p> <p class="panel-body"> <button md-rasied-button (click)="onChangeNgifValue()">改变ngif变量</button> <br /> <p *ngIf="ngif; else ngifTrue" > <h4 id="ngif变量的值为true">ngif变量的值为true</h4> </p> <ng-template #ngifTrue> <h4 id="ngif变量的值为false">ngif变量的值为false</h4> </ng-template> </p> <p class="panel-footer">2018-1-27 16:58:17</p> </p> <p class="panel panel-primary"> <p class="panel-heading">RXJS使用</p> <p class="panel-body"> <h4 id="测试内容">测试内容</h4> </p> <p class="panel-footer">2018-1-23 21:14:49</p> </p> <p class="panel panel-primary"> <p class="panel-heading">自定义验证器</p> <p class="panel-body"> <form (ngSubmit)="onTestLogin()" [formGroup]="loginForm"> <md-input-container> <input mdInput placeholder="请输入登录名" formControlName="username" /> </md-input-container> <br /> <md-input-container> <input mdInput placeholder="请输入密码" formControlName="userpwd" /> </md-input-container> <br /> <button type="submit" md-raised-button>登陆</button> </form> </p> <p class="panel-footer">2018-1-23 11:06:01</p> </p> <p class="panel panel-primary"> <p class="panel-heading">响应式表单</p> <p class="panel-body"> <form [formGroup]="testForm"> <md-input-container> <input mdInput type="text" placeholder="请输入邮箱" formControlName="email" /> <span mdSuffix>@163.com</span> </md-input-container> <br /> <md-input-container> <input mdInput type="password" placeholder="请输入密码" formControlName="password" /> </md-input-container> </form> <hr /> <p> <h2 id="表单整体信息如下">表单整体信息如下:</h2> <h4 id="表单数据有效性-testForm-valid">表单数据有效性:{{testForm.valid}}</h4> <h4 id="表单数据为-testForm-value-nbsp-nbsp-json">表单数据为:{{testForm.value | json}}</h4> <h4 id="获取单个或多个FormControl-testForm-controls-email-nbsp">获取单个或多个FormControl:{{testForm.controls['email'] }}</h4> <hr /> <h2 id="email输入框的信息如下">email输入框的信息如下:</h2> <h4 id="有效性-testForm-get-email-valid">有效性:{{testForm.get('email').valid}}</h4> <h4 id="email输入框的错误信息为-testForm-get-email-errors-nbsp-nbsp-json">email输入框的错误信息为:{{testForm.get('email').errors | json}}</h4> <h4 id="required验证结果-testForm-hasError-required-nbsp-email-nbsp-nbsp-json">required验证结果:{{testForm.hasError('required', 'email') | json}}</h4> <h4 id="minLength验证结果-nbsp-testForm-hasError-minLength-nbsp-email-nbsp-nbsp-json-nbsp">minLength验证结果:{{ testForm.hasError('minLength', 'email') | json }}</h4> <h4 id="hello-nbsp-testForm-controls-email-errors-nbsp-nbsp-json-nbsp">hello:{{ testForm.controls['email'].errors | json }}</h4> <hr /> <h2 id="password输入框啊的信息如下">password输入框啊的信息如下:</h2> <h4 id="有效性-testForm-get-password-valid">有效性:{{testForm.get('password').valid}}</h4> <h4 id="password输入框的错误信息为-testForm-get-password-errors-nbsp-nbsp-json-nbsp">password输入框的错误信息为:{{testForm.get('password').errors | json }}</h4> <h4 id="required验证结果-testForm-hasError-required-nbsp-password-nbsp-nbsp-json">required验证结果:{{testForm.hasError('required', 'password') | json}}</h4> </p> <p> <button nd-rasied-button (click)="onTestClick()">获取数据</button> <h4 id="data变量-data">data变量:{{data}}</h4> </p> </p> <p class="panel-footer">2018-1-22 15:58:43</p> </p> <p class="panel panel-primary"> <p class="panel-heading">利用响应式编程实现表单元素双向绑定</p> <p class="panel-body"> <md-input-container> <input mdInput placeholder="请输入姓名(响应式双向绑定):" [formControl]="name"/> </md-input-container> <p> 姓名为:{{name.value}} </p> </p> <p class="panel-footer">2018-1-22 11:12:35</p> </p> --> <p class="panel panel-primary"> <p class="panel-heading">模板表单</p> <p class="panel-body"> <md-input-container> <input mdInput placeholder="随便输入点内容" #a="ngModel" [(ngModel)]="desc" name="desc" /> <button type="button" md-icon-button mdSuffix (click)="onTestNgModelClick()"> <md-icon>done</md-icon> </button> </md-input-container> <p> <h3 id="名为desc的表单控件的值为-nbsp-a-value-nbsp">名为desc的表单控件的值为:{{ a.value }}</h3> </p> </p> <p class="panel-footer">2018-1-22 10:19:31</p> </p> <p class="panel panel-primary"> <p class="panel-heading">md-chekbox的使用</p> <p calss="panel-body"> <p> <md-checkbox #testCheckbox color="primary" checked="true">测试</md-checkbox> </p> <p *ngIf="testCheckbox.checked"> <h2 id="测试checkbox被选中啦">测试checkbox被选中啦</h2> </p> </p> <p class="panel-footer">2018-1-18 14:02:20</p> </p> <p class="panel panel-primary"> <p class="panel-heading">md-tooltip的使用</p> <p class="panel-body"> <span md-tooltip="重庆火锅">鼠标放上去</span> </p> <p class="panel-footer">2018-1-18 14:26:58</p> </p> <p class="panel panel-primary"> <p class="panel-heading">md-select的使用</p> <p class="panel-body"> <md-select placeholder="请选择目标列表" class="fill-width" style="height: 40px;"> <md-option *ngFor="let taskList of taskLists" [value]="taskList.name">{{taskList.name}}</md-option> </md-select> </p> <p class="panel-footer">2018-1-18 14:26:58</p> </p> <p class="panel panel-primary"> <p class="panel-heading">ngNonBindable指令的使用</p> <p class="panel-body"> <h3 id="描述">描述</h3> <p>使用了ngNonBindable的标签,会将该标签里面的元素内容全部都看做时纯文本</p> <h3 id="例子">例子</h3> <p> <span>{{taskLists | json }}</span> <span ngNonBindable>← 这是{{taskLists | json }}渲染的内容</span> </p> </p> <p class="panel-footer">2018-1-19 09:34:26</p> </p>
HTML
import { Component, OnInit, HostListener, Inject} from '@angular/core'; import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms'; import { Http } from '@angular/http'; import { QuoteService } from '../../service/quote.service'; @Component({ selector: 'app-test01', templateUrl: './test01.component.html', styleUrls: ['./test01.component.scss'] }) export class Test01Component implements OnInit { countNumber: number = 9; outerCounterValue: number = 5; ngif = true; loginForm: FormGroup; testForm: FormGroup; data: any; name: FormControl = new FormControl(); desc: string = 'hello boy'; taskLists = [ {label: 1, name: '进行中'}, {label: 2, name: '已完成'} ]; constructor( private formBuilder: FormBuilder, private http: Http, @Inject('BASE_CONFIG') private baseConfig, private quoteService: QuoteService ) {} ngOnInit() { this.testForm = new FormGroup({ email: new FormControl('', [Validators.required, Validators.minLength(4)], []), password: new FormControl('', [Validators.required], []) }); this.name.valueChanges .debounceTime(500) .subscribe(value => alert(value)); this.loginForm = this.formBuilder.group({ username: ['', [Validators.required, Validators.minLength(4), this.myValidator], []], userpwd: ['', [Validators.required, Validators.minLength(6)], []] }); this.quoteService.test() .subscribe(resp => console.log(resp)); } onChangeNgifValue() { if (this.ngif == false) { this.ngif = true; } else { this.ngif = false; } } @HostListener('keyup.enter') onTestNgModelClick() { alert('提交'); } onTestClick() { // this.data = this.testForm.get('email').value; // console.log(this.testForm.getError); console.log(this.testForm.controls['email']); } onTestLogin() { console.log(this.loginForm.value); if (this.loginForm.valid) { console.log('登陆数据合法'); } else { console.log('登陆数据不合法'); console.log(this.loginForm.controls['username'].errors); console.log(this.loginForm.get('userpwd').errors); } } myValidator(fc: FormControl): {[key: string]: any} { const valid = fc.value === 'admin'; return valid ? null : {myValidator: {requiredUsername: 'admin', actualUsername: fc.value}}; } }
3.6 初始化效果展示
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
JavaScript中Object基础内部方法图(图文教程)
The above is the detailed content of About the use of custom form controls in Angular19. For more information, please follow other related articles on the PHP Chinese website!

Both Python and JavaScript's choices in development environments are important. 1) Python's development environment includes PyCharm, JupyterNotebook and Anaconda, which are suitable for data science and rapid prototyping. 2) The development environment of JavaScript includes Node.js, VSCode and Webpack, which are suitable for front-end and back-end development. Choosing the right tools according to project needs can improve development efficiency and project success rate.

Yes, the engine core of JavaScript is written in C. 1) The C language provides efficient performance and underlying control, which is suitable for the development of JavaScript engine. 2) Taking the V8 engine as an example, its core is written in C, combining the efficiency and object-oriented characteristics of C. 3) The working principle of the JavaScript engine includes parsing, compiling and execution, and the C language plays a key role in these processes.

JavaScript is at the heart of modern websites because it enhances the interactivity and dynamicity of web pages. 1) It allows to change content without refreshing the page, 2) manipulate web pages through DOMAPI, 3) support complex interactive effects such as animation and drag-and-drop, 4) optimize performance and best practices to improve user experience.

C and JavaScript achieve interoperability through WebAssembly. 1) C code is compiled into WebAssembly module and introduced into JavaScript environment to enhance computing power. 2) In game development, C handles physics engines and graphics rendering, and JavaScript is responsible for game logic and user interface.

JavaScript is widely used in websites, mobile applications, desktop applications and server-side programming. 1) In website development, JavaScript operates DOM together with HTML and CSS to achieve dynamic effects and supports frameworks such as jQuery and React. 2) Through ReactNative and Ionic, JavaScript is used to develop cross-platform mobile applications. 3) The Electron framework enables JavaScript to build desktop applications. 4) Node.js allows JavaScript to run on the server side and supports high concurrent requests.

Python is more suitable for data science and automation, while JavaScript is more suitable for front-end and full-stack development. 1. Python performs well in data science and machine learning, using libraries such as NumPy and Pandas for data processing and modeling. 2. Python is concise and efficient in automation and scripting. 3. JavaScript is indispensable in front-end development and is used to build dynamic web pages and single-page applications. 4. JavaScript plays a role in back-end development through Node.js and supports full-stack development.

C and C play a vital role in the JavaScript engine, mainly used to implement interpreters and JIT compilers. 1) C is used to parse JavaScript source code and generate an abstract syntax tree. 2) C is responsible for generating and executing bytecode. 3) C implements the JIT compiler, optimizes and compiles hot-spot code at runtime, and significantly improves the execution efficiency of JavaScript.

JavaScript's application in the real world includes front-end and back-end development. 1) Display front-end applications by building a TODO list application, involving DOM operations and event processing. 2) Build RESTfulAPI through Node.js and Express to demonstrate back-end applications.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool

SublimeText3 Chinese version
Chinese version, very easy to use

Notepad++7.3.1
Easy-to-use and free code editor
