How to return form values in Angular?-CodePudding

i've built a simple page in angular which gets some data from a webservice, puts it into variables, and displays them in text boxes (and one check box) and now I need to pass the values of those controls into a function when I click a submit button. I have found a few examples on the web but most either don't work or are too complicated for my needs as a beginner.

I have added a form around my controls like this:

<form #policydetails="ngForm" (ngSubmit)="onClickSubmit(policydetails)">

</form>

And I have added ngModel to each of the input controls. In my ts file I have an interface:

interface policyDetails {
 surveyChecked: boolean;
  title: string;
  name: string;
  address1: string;
  address2: string;
  address3: string;
  address4: string;
  address5: string;
  postcode: string;
  telephone: string;
  telephone_work: string;
  telephone_mobile: string;
  email: string;
  policy_no: string;
}

And my onClickSubmit function looks like this:

onClickSubmit(policydetails: policyDetails) {
  alert(policydetails.title);
}

This seems like it should work, but when I serve the site I get this:

Compiled with problems:X

ERROR

src/app/app.component.html:4:59 - error TS2345: Argument of type 'NgForm' is not assignable to parameter of type 'policyDetails'.
  Type 'NgForm' is missing the following properties from type 'policyDetails': surveyChecked, title, address1, address2, and 9 more.

4   <form #policydetails="ngForm" (ngSubmit)="onClickSubmit(policydetails)">

Can anyone tell me what i'm doing wrong? Please try to keep your answer clear and simple as i'm very new to Angular. Thanks!

CodePudding user response：

I believe you can remove ="ngForm" as it is the wrong syntax, you can do #policydetails for policydetails to be your id. Try this

<form #policydetails (ngSubmit)="onClickSubmit()">

</form>

This will give you a empty form that submit to nothing , then you can use some angular FormControl, to keep track of your data. You can go to Angular form for the full documentation.

CodePudding user response：

I have to say I'm a little disappointed at the response to this, given that it's such a basic task for an angular developer. In any case, I've managed to find a solution by myself. I made a small tweak to the form from:

<form #policydetails="ngForm" (ngSubmit)="onClickSubmit(policydetails)">

</form>

to:

<form #policydetails="ngForm" (ngSubmit)="onClickSubmit(policydetails.value)">

</form>

I also had to change the inputs from:

<input type="text" value="{{ title }} " name="title" ngModel>

to:

<input type="text" [(ngModel)]="title" name="title" />

Anyway, thanks Zepse Wolf and Eliseo for trying. Hopefully this might help others trying to get to grips with angular.

CodePudding user response：

Some points to the response to the question (It's only as curiosity because really the best bet is use [(ngModel)], or Reactive Forms

Really you can use only ngModel in the way

  <input name="first" ngModel required>

(no need [(ngModel)]).

If you want to know if the input is touched or has errors you can use a template reference variable:

<input name="first" ngModel required #first="ngModel"> 
<span *ngIf="first.errors && first.touched">Required!!</span>

To give value you can use the own "ngForm" in the way, e.g.

  //get the ngForm
  @ViewChild('policydetails',{static:true}) ngForm:NgForm

  
  @ViewChild('policydetails') ngForm:NgForm

  ngOnInit()
  {
    //it's necesary enclosed in a setTimeout because 
    //Angular "create the ngForm" after paint it
    setTimeout(()=>{
      this.ngForm.setValue({first:'first',last:'last'})

    })
  }

see the stackblitz

But, really is good practice use [(ngModel)] in each input

<input type="text" [(ngModel)]="first" name="title" />

And, as the answer indicate, if we use [(ngModel)] never use value (or checked if is a checkbox). Simply give value to the variable