Formbuilder Nested Array Specific Value Change Detection

See also questions close to this topic

• Angular 5 Dynamically change images ngFor according to Array function

  I am trying to get an image to dynamically change on the HTML with ngFor

  so what I did is:

  looping through an Array and change the value of a variable according to the current weather:

  for (let i = 0, len = this.forecasts.list.length; i < len; i++) {
  
          if ( this.forecasts.list[i].weather[0].main.toLowerCase().indexOf('rain') > -1 ) {
  
          this.forecastImg = 'http://icons.iconarchive.com/icons/icons8/ios7/96/Weather-Rain-icon.png';
  
          console.log(this.forecasts.list[i].weather[0].main);
  
  } else if (this.forecasts.list[i].weather[0].main.toLowerCase().indexOf('clouds') > -1) {
    this.forecastImg = 'http://icons.iconarchive.com/icons/icons8/windows-8/96/Weather-Clouds-icon.png';
  
  }
  }
  

  And in the component.html:

  <div *ngFor=" let forecast of forecasts.list">
  
  
        <div class="col-md-3 col-sm-6 mb-4">
          <a href="#">
            <img class="img-fluid" bind-src="forecastImg">
          </a>
  

  But unfortunately the result is that I only get the first image for all the items (http://icons.iconarchive.com/icons/icons8/ios7/96/Weather-Rain-icon.png)

  Instead of having the image placed according to the output
• angular.io material mat-slide-toggle doesn't work on android chrome

  I am using a mat-slide-toggle on the angular web app.

  <mat-slide-toggle [checked]="pickCache.getAutoPack()" (change)="onChangeAutoPack($event)">Auto Pack</mat-slide-toggle>
  

  It displays fine on the desktop chrome browser.

  

  However, when I deploy to the web server and open from my Nexus 5X smart phone in the chrome browser app, it looks horrible.

  

  Why?
• How to pass data to a generic angular component (dialog)

  Is there a more intuitive way to accomplish what I have below?
  
  I am trying to make a generic dialog component that the caller can customize by passing in a setupParam class.
  
  I'm still new to the Angular world, while the below code does function as I want, it's not very intuitive to another developer that the setupParam class is needed.

  Dialog HTML:

  <div>
    <h2 mat-dialog-title>{{setupParams.title}}</h2>
    <mat-dialog-content>
      <ng-content></ng-content>
    </mat-dialog-content>
    <mat-dialog-actions>
      <button mat-raised mat-dialog-close [mat-dialog-close]="false">{{setupParams.button1}}</button>
      <button mat-raised [mat-dialog-close]="true">{{setupParams.button2}}</button>
    </mat-dialog-actions>
  </div>
  

  Dialog Typescript:

  export class DialogGeneric {
  
    public setupParams: GenericDialogProperties;
  
    constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
      this.setupParams = data.dialogParams;
    }
      //public dialogRef: MatDialogRef<DialogGeneric>, @Inject(MAT_DIALOG_DATA) public data: any) {}
  
  }
  

  Calling program Typescript:

    myMethod(id) {
      let myDialog = this.dialog.open(MyDialog, {
        height: "400px", width: "400px",
        data: { someData: "some data", dialogParams: this.modalSetup },
    });
  
• Angular <progress> (change) not firing

  I'm trying to use the HTML5 <progress></progress> tag in an Angular application. I'd like to emit when the progress tag's value has reached 100. I assumed that I should use a (change) event binding like this:

  <progress max="100" 
            [value]="item.progress" 
            (change)="progressChanged($event)"></progress>
  

  I even tried it with a 2-way binding to see if that changed anything. But I just can't seem to get this progressChanged method called. I assume it's not being called because of what I have in the body of said method:

  progressChanged(event) {
    console.log(event);
  }
  

  How do I bind to events attached to the <progress></progress> tag?
• Modify javascript files with an event

  i work with the freeware tool gpxviewer (https://www.j-berkemeier.de/GPXViewer/) to visualize gps tracks.

  my question: I would like to implement a dropdown to the html to change the appearence and scaling. There are javascript files where i would like to change some parameters while the site is open. Is it possible to make a menu, which opens the js files, modifies some line of codes and reload the page with the new parameters?

  <select id="dropdown" onchange="changeFunc();">
      <option value="variante1" selected>Variante1</option>
      <option value="variante2">Variante2</option>
      <option value="variante3">Variante3</option>
  </select>
  

  lines in javascript file i would like to modify with the select-menu (example):

  JB.Scaling = {
     bandwidthDownmin: 0,bandwidthDownmax: 150,
     hardscaling:true
  }; 
  

  thank you for your help
• jQuery, on input[type=radio] change verify something if false, call 2 other functions

  I am trying to create an event that fires some functions depending on the id of an input[type=radio]. If the Id clicked is different to maybe_evtDiag, it should call this.applySubConditionalRequired(); and this.bindUISubActions();. Why is my code not working?

  var SubFormStuff = {
  
    init: function()
      this.applySubConditionalRequired();
      this.bindUISubActions();
    },
  
    bindUISubActions: function() {
      // when a radio or checkbox changes value, click or otherwise
      $("input[type='radio'].stepThreeDiag").change(function() {
        if($(this).attr("id") == "maybe_evtDiag") {
          $(this).prop('checked', false);
        }else{
  
         //this is not working //
          applySubConditionalRequired(this);
          displaySubFormRequired(this);
  
        }
      });
    },
  
    applySubConditionalRequired: function() {
      $(".require-if-subevent-active").each(function() {
        var el = $(this);
        // does something
      });
    },
  
    displaySubFormRequired: function() {
      $(".div-subevent-class").each(function() {
        var el = $(this);
        // does something else
      });
    }
  
  };
  
  SubFormStuff.init();
  
• Symfony 3 : Modifying form data after submission

  I'm facing a problem with Symfony 3.4 :

  I have a formbuilder including 2 buttons ('add' and 'extract') and when 'add' is clicked, I want to add a new field in a CollectionType instead of doing the "extract" stuff.

  I tried to do it with FormEvent but when I can tell which button isClicked() (SUBMIT), it's too late to call $event->setData() and $event->getForm()->setData() do nothing. On the other hand, when I can setData() (PRE_SUBMIT), I can't tell which button isClicked() since the information isn't computed yet in the submission process.

  How can I achieve to add a value in my CollectionType (and so, a new field) after the 'add' button be clicked.

  Thanks

  $this->createFormBuilder(array('columns' => array(1, 2, 3)))
              ->add('columns', CollectionType::class, array(
                  'entry_type' => TextType::class
              ))
              ->add('extract', SubmitType::class)
              ->add('add', SubmitType::class)
              ->addEventListener(FormEvents::SUBMIT, function(FormEvent $event) {
  
                  if ($event->getForm()->get('add')->isClicked()) {
  
                      $data = $event->getData();
                      $data['columns'][] = null;
                      $event->setData($data);
                  }
              })
              ->getForm()
              ->handleRequest($request)
  
• Save form data in two models in Odoo

  I have created two models (A and B) with the same fields, only for backup purposes. I created a form with A as model using HTML Form Builder. Normally, form data will save in table A (model A). I want to save the data that is inserted in the B model as well.
• Using database triggers on forms in Odoo

  I have created a trigger in my database that i want to run whenever i insert a new record. I have created a form in Odoo using the form builder to capture these data.

  When I submit my form, I get an error:

  An error has occurred during the submission of your form data
  Failed to insert record
  Permission denied for relation b
  Context: SQL Statement “insert into b values (new.a_name ,new.a_num ,new.a_addr);”
  PL/pgSQL function trigger_a line 4 at SQL statement

  It has something to do with permissions. Is it possible to use triggers in forms created using HTML form builder?

  If yes, how? Can anyone explain?