Dynamic create li when you click add button angular 7

Question

I am new to angular, wanted to add address every time click the button "Add Address". I wanted it to be dynamic then I will submit.

HTML:

<div class="form-group">
      <label for="name">Address: </label>
      <div>
        <button type="button" class="btn btn-info" (click)="addAddress()" >Add Address</button>
      </div>
      <div>
        <ul>
          <li *ngFor="let add of contact.address | async">
            <label for="name">Type</label>
            <input type="text" class="form-control" id="atype" required [(ngModel)]="add.type" name="atype">
            ....
          </li>
        </ul>
      </div>
    </div>

TS:

addAddress() {
    let add = {
      id: 0,
      type: '',
      number: 0,
      street: '',
      unit: '',
      city: '',
      state: '',
      zipcode: ''
    };
    this.contact.Address.push(add);
  }

when I click it does nothing but when I submit

I got empty arrays created:

Address: [{id: 0, type: "", number: 0, street: "", unit: "", city: "", state: "", zipcode: ""},…]
0: {id: 0, type: "", number: 0, street: "", unit: "", city: "", state: "", zipcode: ""}
1: {id: 0, type: "", number: 0, street: "", unit: "", city: "", state: "", zipcode: ""}
2: {id: 0, type: "", number: 0, street: "", unit: "", city: "", state: "", zipcode: ""}

please provide your full code to understand fully, and explain what you plan to achieve very clearly — upsidedownwf
– upsidedownwf, Commented Sep 5, 2020 at 1:41
I cant provide the whole code because it is too long. what do you need? I just get the segment where the address is processed. is this lacking? — Jose Marlon Ancajas
– Jose Marlon Ancajas, Commented Sep 5, 2020 at 1:44
what your code is doing now when you click addAddress, it pushes the add object to your array, with the values you initialized in your typescript. and when you submit, get that array back? if that is the processs, then your code is working well — upsidedownwf
– upsidedownwf, Commented Sep 5, 2020 at 1:48
yes it is supposed to be creating the all the fields as a input element, but it did not create it. nothing happens. there should be a newly create li element which have all the input for the object address now it just do nothing. — Jose Marlon Ancajas
– Jose Marlon Ancajas, Commented Sep 5, 2020 at 1:54
did you subscribe contactaddress to an observable. and from your typescript code i can see "this.contact.Address.push(add)" and in your html "let add of contact.address | async", pls use this same case for the "a" in your address for your html and typescript — upsidedownwf
– upsidedownwf, Commented Sep 5, 2020 at 2:11

huan feng · Accepted Answer · 2020-09-05 03:30:27Z

1

Typo on the lower case and upper case:

Use the upper case Address in TS code, and the lower case on template:

this.contact.Address

There is also another issue, using id attribute in a repeat, you will get repeat ids in the template.

We should avoid using id in the template unless we have to, if we have to use the id in template, we should make the id unique.

Fixed on stackblitz:

https://stackblitz.com/edit/template-driven-form-example-pvdhhh?file=src/app/app.component.html

edited Sep 5, 2020 at 3:30

answered Sep 5, 2020 at 3:25

huan feng

8,7043 gold badges40 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamic create li when you click add button angular 7

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related