How to change an input text and store it afterwards?

Question

I have an input field where a user should be able to change his name. So can manipulate the field, and when terminated the new string should be stored as a new username? I tried to achieve that with formbut I get this error: Error: Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'.

Here is my code

page.html

<form [formGroup]="form" (ngSubmit)="changeName()">
    <ion-list no-border>

        <ion-list-header>
          My Account
        </ion-list-header>

        <ion-item >
           
       <ion-input>{{username}}</ion-input>
        </ion-item>
  ...

      </ion-list>
    </form>

page.ts

import { FormGroup, FormControl, Validators} from '@angular/forms';
...
form: FormGroup;

public usernameInput = '';
...

constructor() {}

...

changeName() {
  this.usernameInput = '';
}

 ngOnInit() {
    this.form = new FormGroup({
     username: new FormControl(null, {
       updateOn: 'submit',
       validators: [Validators.required, Validators.maxLength(20), Validators.minLength(1)]
     })
 });
}

score 2 · Answer 1 · answered Aug 13 '19 at 19:51

2

Import the ReactiveFormsModule to your feature module.

answered Aug 13 '19 at 19:51

iams0nus

481
3
8

well that worked but the form is not stored when I leave the page and go back again. I always have an empty input field – Colin Ragnarök Aug 14 '19 at 00:42

How to change an input text and store it afterwards?

page.html

page.ts

1 Answers1