title: drag and drop angular order not changing
body: <p>i create form builder based on this <a href="https://stackblitz.com/edit/angular-dynamic-survey-creation-golkhg" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-dynamic-survey-creation-golkhg</a>, and i use this function for droped</p>
  <pre><code>onDrop(event: CdkDragDrop&lt;string[]&gt;) {
      moveItemInArray(this.surveyForm.get('surveyQuestions')['controls'], event.previousIndex, event.currentIndex);
  }
  </code></pre>
  <p>the <code>questionTitle</code> must changing, but it was not</p>
  <p><a href="https://i.stack.imgur.com/wy6nZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wy6nZ.png" alt="enter image description here" /></a></p>
  <p>but in the html it's changing</p>
  <p><a href="https://i.stack.imgur.com/b5pvK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b5pvK.png" alt="enter image description here" /></a></p>
  <p>the order of the array is changing in html, but in my json is not changing, can someone help me?</p>
  <p>EDIT</p>
  <p>After a while i don't touch this code again, i found some error,please see this before and after images, here's before</p>
  <p><a href="https://i.stack.imgur.com/hQjKQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hQjKQ.png" alt="Before" /></a></p>
  <pre><code>&quot;quizQuestions&quot;: [
      {
        &quot;questionType&quot;: &quot;File Upload&quot;,
        &quot;display_order&quot;: 1,
        &quot;questionGroup&quot;: {
          &quot;questionTitle&quot;: &quot;&quot;,
          &quot;quizAnswer&quot;: &quot;&quot;
        }
      },
      {
        &quot;questionType&quot;: &quot;Tanggal&quot;,
        &quot;display_order&quot;: 2,
        &quot;questionGroup&quot;: {
          &quot;questionTitle&quot;: &quot;&quot;,
          &quot;quizAnswer&quot;: &quot;&quot;
        }
      }
    ],
  </code></pre>
  <p>after i dragged the first form, it looks like this</p>
  <p><a href="https://i.stack.imgur.com/JvUgt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JvUgt.png" alt="After" /></a></p>
  <pre><code>&quot;quizQuestions&quot;: [
      {
        &quot;questionType&quot;: &quot;Tanggal&quot;,
        &quot;display_order&quot;: 2,
        &quot;questionGroup&quot;: {
          &quot;questionTitle&quot;: &quot;&quot;,
          &quot;quizAnswer&quot;: &quot;&quot;
        }
      },
      {
        &quot;questionType&quot;: &quot;File Upload&quot;,
        &quot;display_order&quot;: 1,
        &quot;questionGroup&quot;: {
          &quot;questionTitle&quot;: &quot;&quot;,
          &quot;quizAnswer&quot;: &quot;&quot;
        }
      }
    ],
  </code></pre>
  <p>what's is wrong actually? i've tried both of the best solution you guys provide but it's still like this, please help me out. Note: i change surverysQuestions to quizQuestions</p>