Angular input's ngModel and Value don't work together-CodePudding

I have a problem with the form in angular. My goal is to make a form that is filled with default values that can be changed. After validating the form, it sends the data to the MySQL database.

This is component.html code:

<form #adopt="ngForm" (ngSubmit)="success()">
        <label for="email">Email:</label>
        <input type="email" name="email" [(ngModel)]="adoptions.email" #email="ngModel">
        <label for="animal">Twój wybór to:</label>
        <input type="text" name="animal" [(ngModel)]="adoptions.animal" #email="ngModel">
        <button [disabled]="adopt.form.invalid" type="submit">Adoptuj</button>
        <button (click)="getAnimal('')" >Odznacz swój wybór</button>
      </form>

This is typeScript code:

export class AdoptpageComponent implements OnInit {

adoptions = new Adoptions();
sessionValue
animal
value
msg='';

constructor(private userService: UserService, private shared: SharedService, private _service 
: AdoptService, private _router : Router) {
}

ngOnInit(): void {
  this.getUsers();
  this.sessionValue = sessionStorage.getItem('email');
}

getAnimal(arg) {
  this.animal = arg;
}

success() {
  this._service.create(this.adoptions).subscribe(
    data => {
      console.log("dziala");
      this._router.navigate(['/adopt'])
    },
    error => {
      console.log("nie dziala");
      this.msg = error.error;
    }
  )
}

}

The code I posted above works, but only when I enter the value into the form from the keyboard. I want the value from sessionValue to be retrieved automatically in the first form and animal in the second. I managed to achieve it when instead of ngModel I entered:

<input type="email" name="email" [value]="sessionValue" #email="ngModel">

But then the form does not work (it does not send data to the database). Unfortunately, when both are used, [value] = "sessionValue" does not work

<input type="email" name="email" [value]="sessionValue" [(ngModel)]="adoptions.email" #email="ngModel">

do you have an idea what to do to be able to submit the form with the default value?

CodePudding user response：

You are new to this for sure, You should first check how ngModel works.

first: you are binding adoptions.email and adoptions.animal to ngModel, but they are empty(or even worse - null or undefined) when ngOnInit is fired, that is why your inputs are empty. They get value once you introduce text in inputs, that is why you are able to successfully execute this._service.create

second: you are causing a value binding conflict. The source of ngModel is different from the source of value. Once ngOnInit is fired value tries to load the value of sessionValue in input and ngModel tries to load nothing, as its source is empty

There is no need to use value if you have ngModel. You just have to set up start point value for its source variable. like below example

ngOnInit(): void {
   adoptions.email = somehowGetEmail()
   adoptions.animal= somehowGetAnimal()
}

And that's all you have to do, if you insist on using ngModels.

But in general this looks like a lot of unnccessary bindings. Since these are a form inputs you should be using form's preimplemented features for value bindings. Check docs for angular FormBuilder, formControl