angular - Using ngModel within a form, unnecessary to include one-way or two-way binding - Stack Overflow

admin管理员组

文章数量:1355642

In angular documentation /api/forms/NgModel, it mentions

In the context of a parent form, it's often unnecessary to include one-way or two-way binding, as the parent form syncs the value for you

But I cannot understand why no need to include two-way binding? As this make the form just one way, from ui to ts.

e.g. ponent.ts,index.html

 <form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
      First Name<input name="first" ngModel required #first="ngModel" />
      Last Name<input name="last" [(ngModel)]='lastName' />
      <button>Submit</button>
      <button type="button" (click)="updateLastName()">Change lastName </button>
    </form>

in Last Name, I use [(ngModel)]='lastName', then I can modify the lastName property in ts and then shown in UI, if just use ngModel as in first name

First Name<input name="first" ngModel required #first="ngModel" />

then I cannot modify the first name in ts and shown in UI (even no a property link to UI First Name textbox).

So what good to omit [()]? why the document suggest

In the context of a parent form, it's often unnecessary to include one-way or two-way binding, as the parent form syncs the value for you ?

In angular documentation https://angular.dev/api/forms/NgModel, it mentions

In the context of a parent form, it's often unnecessary to include one-way or two-way binding, as the parent form syncs the value for you

But I cannot understand why no need to include two-way binding? As this make the form just one way, from ui to ts.

e.g. https://stackblitz/edit/angular-5-starter-app-xzxmc6tp?file=app%2Fappponent.ts,index.html

 <form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
      First Name<input name="first" ngModel required #first="ngModel" />
      Last Name<input name="last" [(ngModel)]='lastName' />
      <button>Submit</button>
      <button type="button" (click)="updateLastName()">Change lastName </button>
    </form>

in Last Name, I use [(ngModel)]='lastName', then I can modify the lastName property in ts and then shown in UI, if just use ngModel as in first name

First Name<input name="first" ngModel required #first="ngModel" />

then I cannot modify the first name in ts and shown in UI (even no a property link to UI First Name textbox).

So what good to omit [()]? why the document suggest

In the context of a parent form, it's often unnecessary to include one-way or two-way binding, as the parent form syncs the value for you ?

• angular

Share Improve this question Follow edited Mar 31 at 8:15 DarkBee 15.5k88 gold badges7272 silver badges117117 bronze badges asked Mar 31 at 7:45 user1169587user1169587 1,39422 gold badges1919 silver badges4444 bronze badges 1

• 1 indeed you can't update the value from TS, but in the majority of cases you don't need it. at some point you just submit the form and you only care about the whole form value – Andrei Commented Mar 31 at 7:49

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Here's the full quote:

In the context of a parent form, it's often unnecessary to include one-way or two-way binding, as the parent form syncs the value for you. You access its properties by exporting it into a local template variable using ngForm such as (#f="ngForm"). Use the variable where needed on form submission.

If you do need to populate initial values into your form, using a one-way binding for ngModel tends to be sufficient as long as you use the exported form's value rather than the domain model's value on submit.

Source.

It does not say that it's invariably unnecessary, the point is that oftentimes it's not needed and it's a bad practice to include one-way or two-way binding in situations when you would be just fine with the parent form syncing the values for you.

So the point of the documentation is sharing with you is to avoid unquestioningly adding such bindings and only do it when the syncing of values by the parent form is inadequate. So I advise you to test your form, see whether you actually need the bindings and if so, whether it's enough to have a one-way binding. If you need it, add it. But don't add it if you do not need it.

本文标签：