Angular 2将控件添加到父组件的表单
发布时间:2020-12-17 07:36:19 所属栏目:安全 来源:网络整理
导读:我有一个完整的模板自动完成: input [(ngModel)]="model" //todo add control 它实现如下: div class="form-group" label for="location"Location/label auto-complete [(model)]="model.location"/auto-complete/div 除此之外,我还有其他字段遵循以下格式
我有一个完整的模板自动完成:
<input [(ngModel)]="model"> //todo add control 它实现如下: <div class="form-group"> <label for="location">Location</label> <auto-complete [(model)]="model.location"></auto-complete> </div> 除此之外,我还有其他字段遵循以下格式:(通知验证指令) <div class="form-group" [fieldValidity]="biography"> <label for="currentPassword">Biography</label> <textarea [(ngModel)]="model.biography" ngControl="biography" #biography="ngForm" maxlength="300" class="form-control" placeholder="About me..." rows="4"></textarea> <p class="xui-meta-info"> We suggest a short bio. If it's 300 characters or less it'll look great on your profile. </p> <field-validation-messages [field]="biography"></field-validation-messages> </div> 如您所见,我的验证指令依赖于在表单上具有关联控件的输入.如何确保自动完成输入在父表单中具有关联控件? (我尝试以编程方式创建一个新的Control(),然后调用form.addControl(),但只接受一个NgControl
您需要通过实现自定义值访问器使您的自动完成组件与控件兼容.
这是一个示例: @Component({ selector: 'auto-complete',template: ` <input [(ngModel)]="model" (ngModelChange)="onChange($event)> `,(...) }) export class AutoCompleteComponent implements AfterViewInit,ControlValueAccessor { onChange = (_) => {}; onTouched = () => {}; writeValue(value: any): void { this.model = value; } registerOnChange(fn: (_: any) => void): void { this.onChange = fn; } registerOnTouched(fn: () => void): void { this.onTouched = fn; } } 这样您就可以通过以下方式直接添加对自动完成组件的控制: <auto-complete [(model)]="model.location" [ngFormControl]="someCtrl"> <!-- or #autoComplete="ngForm" ngControl="autoComplete" --> </auto-complete> 有关更多详细信息,请参阅此文章(“与NgModel兼容的组件”部分): > http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/ 这个问题也可以帮到你: > Custom checkbox input component styled with Switchery (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |