首页 文章

自定义表单输入不绑定到模型

提问于
浏览
0

我试图在Angular 4中创建自定义表单输入 . 这是一个简单的示例,但我无法将组件绑定到ngModel . 我可以从父控制器传递此组件的默认值,但是当我更改此输入中的值时,UI会注册更改,但控制器中的模型不会显示新值 .

这是我的自定义组件:

import { Component, Input, forwardRef, Output, EventEmitter, ElementRef, Renderer } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl } from '@angular/forms';

@Component({
    selector: 'input-test2',
    template:
        `
           <input type="text" class="form-control" placeholder="Symbol"  [(ngModel)]="value" [maxlength]="5" >     
        `,
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => InputTestComponent),
            multi: true
        },
    ]
})
export class InputTestComponent implements ControlValueAccessor {
    @Input('value') value = false;
    
    private propagateChange = (_: any) => { };
    private propagateTouch = (_: any) => { };
    
    writeValue(value: any): void {
        if (value) {
            this.value = value;
        }
    }
    
    registerOnChange(fn: (_: any) => void): void {
        this.propagateChange = fn;
    }
    registerOnTouched(fn: () => void): void {
        this.propagateTouch = fn;
    }
    
    private onChange(event : any) {
        this.propagateChange(this.value);
    }

我对组件的使用:..在一个表单内

<input-test2 id="coin" name="coin" [(ngModel)]="manualEntry.coin" #coin="ngModel" required (change)="x($event)" > </input-test2>

有没有人有一个如何做这个自定义表单输入的简单示例?我发现的所有例子要么复杂,要么省略功能 . 我只想要一个默认输入类型=“text”开始,然后我可以添加到此 .

1 回答

  • 0

    感谢上面的评论 . 现在按预期工作 . 这似乎是一个很好的片段,它提供了input type =“text”的基本实现:

    import { Component, Input, forwardRef} from '@angular/core';
    import { ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
    
    @Component({
        selector: 'input-test2',
        template:
            `
               <input type="text" class="form-control" placeholder="Symbol"  [(ngModel)]="value" [maxlength]="5" (change)="onChange($event)" [disabled]="isDisabled" >     
            `,
        providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => InputTestComponent),
                multi: true
            },
        ]
    })
    export class InputTestComponent implements ControlValueAccessor {
        @Input('value') value = false;
        
        private propagateChange = (_: any) => { };
        private propagateTouch = (_: any) => { };
        private isDisabled: boolean = false;
        
        constructor(){
    
        }
        writeValue(value: any): void {
            if (value) {
                this.value = value;
            }
        }
        
        registerOnChange(fn: (_: any) => void): void {
            this.propagateChange = fn;
        }
        registerOnTouched(fn: () => void): void {
            this.propagateTouch = fn;
        }
        
        private onChange(event : any) {
            this.propagateChange(this.value);
        }
    
        private onTouch(event : any){
            this.propagateTouch(event);
        }
    
        setDisabledState(isDisabled: boolean): void {
            this.isDisabled = isDisabled;
          }
    
    
    
    }
    

    并且可以使用以下形式使用此组件:

    <input-test2 
           type="text"  
           id="coin" name="coin"  
           [(ngModel)]="manualEntry.coin"  
           #coin="ngModel" 
           required [disabled]="false" 
           (change)="test($event)">
    </input-test2>
    

    我希望有更好的说明,因为我觉得这是在表单中创建自定义/可重用组件的一种相当普遍的做法 .

相关问题