I can't see initial value to ngModel-CodePudding

I have the following reusable component code-component

HTML

<input [(ngModel)]="value"/>

I implemented control value accessor for this

import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';


export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => CodeComponent),
    multi: true
};

@Component({
    selector: 'code',
    templateUrl: './code.component.html',
    styleUrls: ['./code.component.scss'],
    providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})
export class CodeComponent implements ControlValueAccessor {
    onChange: any = () => { }
    onTouch: any = () => { }
    val = ""

    // value;
    set value(val) {
        if (val !== undefined && this.val !== val) {
            this.val = val
            this.onChange(val)
            this.onTouch(val)
        }

    }

    writeValue(value: any) {
        this.value = value
    }

    registerOnChange(fn: any) {
        this.onChange = fn
    }

    registerOnTouched(fn: any) {
        this.onTouch = fn
    }
}

so when i use this component from outside i use it on this way

<code [(ngModel)]="database.id" name="code"></code>

database = {
  id: 2
}

my problem here is that i don't get 2 when the page is loaded. When i start typing i get reflected the ngModel changes in the database.id property

Wheere is my mistake? How can i have 2 as a value in my input from the beggining ?

CodePudding user response：

As mentioned by Andrei you can use getter or use already defined val property

<input [(ngModel)]="val"/>

CodePudding user response：

I didn't test it, but for the overal idea this is a suggestion. In Angular you can set de initial value of a formControl like this: 'control-name': new FormControl('initial value')

[HTML]

<form [formGroup]="form">
   <code formControlName="code"></code>
</form>

[TS]

public form: FormGroup;

ngOnInit(): void {
   this.form = new FormGroup({
      code: new FormControl(2);
   })
}

------------------ CodeComponent ---------------------

[HTML]

<input [formControl]="formControl"/>

<span>Value : {{val| json}}

[TS ]

@Component({
    selector: 'code',
    templateUrl: './code.component.html',
    styleUrls: ['./code.component.scss'],
    providers: [{provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CodeComponent),
    multi: true}]
})
export class CodeComponent implements ControlValueAccessor {
    public val = "";
    public formControl: FormControl;
    private onChange: any = () => ({});
    private onTouch: any = () => ({});
    

    constructor(private ngControl: NgControl) {
       
    }

    public ngOnInit(): void {
        this.formControl = this.ngControl.control as FormControl;

        this.formControl.valueChanges.subscribe(val => console.log(val))
    }

    writeValue(value: any) {
        this.val= value;
    }

    registerOnChange(fn: any) {
        this.onChange = fn;
    }

    registerOnTouched(fn: any) {
        this.onTouch = fn;
    }

}