title: How to add input fields based on the number input from another field in Angular?
body: <p>So, I have an input field which allows number inputs only. What I want to achieve is when I type a number on that input field, it will generate a set of fields(name, address, number, email). For example, I typed 3 on the input field, it should automatically add 3 set of fields(name, address, number, email). Right now I'm using an add button to add the fields manually and there is a set of fields that is already visible to the user. Here is the code for your reference:</p>
  <p>for the number input fields:</p>
  <pre><code>&lt;mat-form-field appearance=&quot;outline&quot; class=&quot;width-3&quot;&gt;
                  &lt;mat-label&gt;Total number of person on board&lt;/mat-label&gt;
                  &lt;input
                    maxlength=&quot;50&quot;
                    matInput
                    formControlName=&quot;totalNumberPersonsOnBoard&quot;
                    placeholder=&quot;number of persons on board&quot;
                    (input)=&quot;inputTotal(total.value)&quot;
                    #total
                    appNumbersSpecial
                    required
                  /&gt;
                  &lt;mat-error&gt;Error! only numbers are allowed&lt;/mat-error&gt;
                &lt;/mat-form-field&gt;
  </code></pre>
  <p>for the set of fields to be generated:</p>
  <pre><code>&lt;div formArrayName=&quot;passenger&quot;&gt;
            &lt;div
              *ngFor=&quot;let passengerGroup of passenger?.controls; let i = index&quot;
              [formGroupName]=&quot;i&quot;
            &gt;
              &lt;div class=&quot;container&quot;&gt;
                
                &lt;div class=&quot;row justify-content-start&quot;&gt;
                  &lt;div class=&quot;col-md&quot;&gt;
                    &lt;mat-form-field appearance=&quot;outline&quot; class=&quot;width-1&quot;&gt;
                      &lt;mat-label&gt;Passenger's name&lt;/mat-label&gt;
                      &lt;input
                        maxlength=&quot;50&quot;
                        matInput
                        formControlName=&quot;name&quot;
                        placeholder=&quot;Passenger's name&quot;
                        required
                      /&gt;
                    &lt;/mat-form-field&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;col-md&quot;&gt;
                    &lt;mat-form-field appearance=&quot;outline&quot; class=&quot;width-1&quot;&gt;
                      &lt;mat-label&gt;Passenger's address&lt;/mat-label&gt;
                      &lt;input
                        maxlength=&quot;250&quot;
                        matInput
                        formControlName=&quot;address&quot;
                        placeholder=&quot;Passenger's address&quot;
                        required
                      /&gt;
                    &lt;/mat-form-field&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;col-md&quot;&gt;
                    &lt;mat-form-field appearance=&quot;outline&quot; class=&quot;width-1&quot;&gt;
                      &lt;mat-label&gt;Passenger's emergency phone&lt;/mat-label&gt;
                      &lt;input
                        maxlength=&quot;50&quot;
                        matInput
                        formControlName=&quot;phone&quot;
                        placeholder=&quot;Passenger's emergency phone&quot;
                        #pass
                        required
                      /&gt;
                      &lt;mat-error&gt;Error! only numbers are allowed&lt;/mat-error&gt;
                    &lt;/mat-form-field&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;col-md&quot;&gt;
                    &lt;mat-form-field appearance=&quot;outline&quot; class=&quot;width-1&quot;&gt;
                      &lt;mat-label&gt;Passenger's email&lt;/mat-label&gt;
                      &lt;input
                        formControlName=&quot;email&quot;
                        maxlength=&quot;50&quot;
                        name=&quot;email&quot;
                        id=&quot;email&quot;
                        placeholder=&quot;email@address.com&quot;
                        autocomplete=&quot;off&quot;
                        type=&quot;text&quot;
                        matInput
                        #email
                        required
                      /&gt;
                      &lt;mat-error&gt;Error! email is incorrect&lt;/mat-error&gt;
                    &lt;/mat-form-field&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  <p>Here is the code for the add button:</p>
  <pre><code>&lt;div class=&quot;center&quot;&gt;
            &lt;button
              type=&quot;button&quot;
              class=&quot;next-button&quot;
              mat-flat-button
              matTooltip=&quot;Add new passenger&quot;
              matTooltipClass=&quot;tooltipClass&quot;
              matTooltipPosition=&quot;below&quot;
              (click)=&quot;addPassenger()&quot;
            &gt;
              &lt;mat-icon&gt;add&lt;/mat-icon&gt;
            &lt;/button&gt;
          &lt;/div&gt;
  </code></pre>
  <p>Here is the TS code for adding the input fields:</p>
  <pre><code> addPassenger(): void {
      this.passenger.push(
        new FormGroup({
          name: new FormControl(),
          address: new FormControl(),
          phone: new FormControl(),
          email: new FormControl('', [
            Validators.pattern(
              /[a-zA-Z0-9.-_]{1,}@[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}/
            ),
          ]),
        })
      );
    }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/oGTmx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oGTmx.png" alt="this is the input field for the number of fields to be generated" /></a></p>
  <p><a href="https://i.stack.imgur.com/GSw8v.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GSw8v.png" alt="and this is the fields to be generated" /></a></p>
  <p><a href="https://i.stack.imgur.com/jKrBn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jKrBn.png" alt="and this is the whole page. As you can see, there is already an existing input fields for the name, address, number, and email" /></a></p>