vimuth
vimuth

Reputation: 5612

Argument of type 'HTMLFormElement' is not assignable to parameter of type 'ElementRef<any>'

I'm working with angular and creating a form element.

I have this inside app.component.html,

<form (ngSubmit)="onSubmit(f)" #f></form>

And this inside app.component.ts,

import { Component, ElementRef } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

    onSubmit(form: ElementRef){
        alert('ss');
    }
}

But getting this error.

src/app/app.component.html:16:34 - error TS2345: Argument of type 'HTMLFormElement' is not assignable to parameter of type 'ElementRef'. Property 'nativeElement' is missing in type 'HTMLFormElement' but required in type 'ElementRef'.

16 <form (ngSubmit)="onSubmit(f)" #f>

Upvotes: 1

Views: 4399

Answers (1)

Emilien
Emilien

Reputation: 2761

I don't think you can do it like this. According to the Angular NgForm, you can try like :

<form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
  ...
</form>
import {NgForm} from '@angular/forms';
...

onSubmit(f: NgForm) {
  console.log(f.value);
  console.log(f.valid);
}

Upvotes: 2

Related Questions