Angular2 use ngModel with ngModelOptions standalone true to link to a reference to model s property

Question

Let s say I have a typescript object of type Mailtype like following   export class Mailtype     constructor      public name   string      public locale   string      public email   string      public properties    Property                Where its  properties  field is an array of type Property   export class Property     constructor      public name   string      public type   string      public example   string      public required   boolean      public masked   boolean              Now in my component I have a single Mailtype object and the html has a form element used for editing and adding to the properties array of the Mailtype    lt form gt      lt tr  ngFor  let property of model properties  let i index  gt             lt td gt               lt input type  text    ngModel    property name  required gt             lt  td gt     lt  tr gt     lt button  click   onAddProperty    gt Add property lt  button gt   lt  form gt    component   export class MailtypeComponent     model   Mailtype    constructor         this model   new Mailtype                   this model properties push new Property            onAddProperty         this model properties push new Property             I was wondering if I m not allowed to use   ngModel   to link to a reference  property  to the array element in the array  especially at the same time I m iterating the array   Because it throws the following error for the above code   ORIGINAL EXCEPTION  If ngModel is used within a form tag  either the name attribute must be set                       or the form control must be defined as  standalone  in ngModelOptions                         Example 1   lt input   ngModel    person firstName  name  first  gt                        Example 2   lt input   ngModel    person firstName   ngModelOptions    standalone  true   gt    So it s suggesting I use either  ngModelOptions    standalone  true   or add a name field to the html  And it looks like  ngModelOptions    standalone  true    works in this case  Why does standalone  true actually means since I cannot find any documentation about it

User · Answer

x000D   x000D   lt form  submit   addTodo    gt  x000D     lt input type  text    ngModel    text  gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

Using  angular forms when you use a  lt form gt  tag it automatically creates a FormGroup   For every contained ngModel tagged  lt input gt  it will create a FormControl and add it into the FormGroup created above  this FormControl will be named into the FormGroup using attribute name   Example    lt form  f  ngForm  gt       lt input type  text    ngModel    firstFieldVariable  name  firstField  gt       lt span gt    f controls  firstField    value    lt  span gt   lt  form gt    Said this  the answer to your question follows   When you mark it as standalone  true this will not happen  it will not be added to the FormGroup    Reference  https   github com angular angular issues 9230 issuecomment-228116474

User · Answer

For me the code    x000D   x000D   lt form  submit   addTodo    gt  x000D     lt input type  text    ngModel    text  gt  x000D   lt  form gt  x000D   x000D   x000D    throws error  but I added name attribute to input    x000D   x000D   lt form  submit   addTodo    gt  x000D     lt input type  text    ngModel    text  name  text  gt  x000D   lt  form gt  x000D   x000D   x000D    and it started to work

[typescript] Angular2 use [(ngModel)] with [ngModelOptions]="{standalone: true}" to link to a reference to model's property

Examples related to typescript

Examples related to angular