Setting values of input fields with Angular 6

Question

I ve ran into some trouble setting the value of an input element using Angular   I m trying to set the value of dynamically created input elements in my application by this method    copyPricingToAll    void     var copyValue  string   document getElementById  priceInputGlobal   value     this currentItem orderLines forEach orderLine   gt      document getElementById  priceInput-    orderLine id  setAttribute  value   copyValue                I m creating the rows like this    lt ng-container  ngFor  let orderLine of currentItem orderLines let i index  gt       lt tr gt          lt td gt   getCorrectTimeString orderLine    lt  td gt          lt td gt   orderLine quantity   lt  td gt          lt td gt  lt input id  priceInput-  orderLine id    type  number  value    orderLine price    gt  lt  td gt       lt  tr gt   lt  ng-container gt    Unfortunately  value is not recognized as a valid operation  I m not sure how to correctly set the value of a dynamically created element in angular  I hope someone is able to help me out with this issue

User · Accepted Answer

You should use the following           lt td gt  lt input id  priceInput-  orderLine id    type  number    ngModel    orderLine price  gt  lt  td gt    You will need to add the FormsModule to your app module in the inputs section as follows   import   FormsModule   from   angular forms     NgModule     declarations                   imports        BrowserModule      FormsModule             The use of the brackets around the ngModel are as follows    The    show that it is taking an input from your TS file   This input should be a public member variable   A one way binding from TS to HTML  The    show that it is taking output from your HTML file to a variable in the TS file   A one way binding from HTML to TS  The      are both  e g  a two way binding    See here for more information  https   angular io guide template-syntax  I would also suggest replacing id  priceInput-  orderLine id    with something like this  id   getElementId orderLine   where getElementId orderLine  returns the element Id in the TS file and can be used anywere you need to reference the element  to avoid simple bugs like calling it priceInput1 in one place and priceInput-1 in another    if you still need to access the input by it s Id somewhere else

User · Answer

As an alternate you can use reactive forms  Here is an example  https   stackblitz com edit angular-pqb2xx   Template    lt form  formGroup   mainForm  ng-submit  submitForm    gt    Global Price   lt input type  number  formControlName  globalPrice  gt     lt button type  button   disabled   mainForm get  globalPrice   value     null   click   applyPriceToAll    gt Apply to all lt  button gt     lt table border formArrayName  orderLines  gt     lt ng-container  ngFor  let orderLine of orderLines let i index   formGroupName   i  gt       lt tr gt          lt td gt   orderLine time   date   lt  td gt          lt td gt   orderLine quantity   lt  td gt          lt td gt  lt input formControlName  price  type  number  gt  lt  td gt       lt  tr gt   lt  ng-container gt     lt  table gt   lt  form gt     Component   import   Component   from   angular core   import   FormGroup  FormControl  FormArray   from   angular forms     Component     selector   my-app     templateUrl     app component html     styleUrls       app component css       export class AppComponent      name    Angular 6     mainForm  FormGroup    orderLines          price  10  time  new Date    quantity  2        price  20  time  new Date    quantity  3        price  30  time  new Date    quantity  3        price  40  time  new Date    quantity  5          constructor         this mainForm   this getForm           getForm    FormGroup       return new FormGroup         globalPrice  new FormControl          orderLines  new FormArray this orderLines map this getFormGroupForLine                 getFormGroupForLine orderLine  any   FormGroup       return new FormGroup         price  new FormControl orderLine price                applyPriceToAll         const formLines   this mainForm get  orderLines   as FormArray      const globalPrice   this mainForm get  globalPrice   value      formLines controls forEach control   gt  control get  price   setValue globalPrice           optionally recheck value and validity without emit event         submitForm

[angular] Setting values of input fields with Angular 6

Examples related to angular

Examples related to typescript