Reactive form, if user-input from keyboard is 1000000 expects to see 10,000.00. So a pipe is needed. Found a few SO posts,

• not working, use .valueChanges, .valueChanges is underlined with curly braces, implemented in code below, error.
• not working, use .value, .value is underlined with curly braces error too. [value]="fg.get('fcTest').value | number: '9.2-2'"
• complicated, subscription to patch the value in this video.

Seems like have to add some code to subscribe for value change event, no simple way?

<form [formGroup]="fg">
    <input
        type="number"
        
        placeholder="integer"
        formControlName="fcTest"
        id="fcTest"
        [value]="fg.get('fcTest').valueChanges |async | number: '9.2.2'"
    />
</form>

fg: FormGroup;
    
constructor(private fb: FormBuilder) {
    this.fg = this.fb.group({
        fcTest: ['', [Validators.required]]
    });
}

CodePudding user response：

All three quoted solution should work, however the error you invoke says that the control is not defined in the component, so the value property cannot be applied to null/undefined. You can either type define the control, either, going by shortcut way, use the non-null assertion operator (!.) or optional chaining operator (?.)

[value]="fg.get('fcTest')?.value | number: '9.2-2'"

CodePudding user response：

If your attempt with [value]="fg.get('fcTest').value | number: '9.2-2'" is giving errors in the IDE, try moving part of it to a function and use typings e.g

// template
[value]="fcTestValue | number: '9.2-2'"

// component
get fcTestValue(): string {
   return (this.fc.get('fcTest')?.value || '') as string;
}