Angular 7: напоминание и динамическое изображение в стиле формулы

Question

Я новичок в Angular. Я хочу настроить форму с помощью кнопки и таблицы. Как только я заполняю форму, нажимаю кнопку «Добавить», в таблице создается новая строка с данными формы.

код формы

 <div class="form-row">
            <div class="col">
                <label for = "codeVariete" >code Variété : </label>
                <select name="codeVariete" id="codeVariete" class="form-control" [(ngModel)] = "codeVariete">
                    <option value="">---</option>
                    <option *ngFor = "let variete of varietes" value = "{{variete.ID}}">{{ variete.designationMP }}</option>
                </select>
            </div>
            <div class="col">
                <label for = "quantite" >quantité : </label>
                <input type="number" name="quantite" id="quantite" class="form-control" [(ngModel)] = "quantite">  
            </div>
            <div class="col">
                <label for = "prixAchat" >Prix Achat : </label>
                <input type="number" name="prixAchat" id="prixAchat" class="form-control" [(ngModel)] = "prixAchat">  
            </div>
            <div class="col">
                <label for = "montant" >Montant : </label>
                <input type="number" name="montant" id="montant" class="form-control" [(ngModel)] = "montant">  

            </div> 
            <div class="col">
                <button class="btn btn-info">Add</button> 
            </div>

        </div>
        <br>

код таблицы

      <table class="table table-striped table-bordered">
            <!--ul class="lis-group mt-4">-->
                <thead>
                    <tr>

                        <td>code</td>
                        <td>quantite</td>
                        <td>Prix Achat</td>
                        <td>Montant</td>
                        <td>Action</td>
                    </tr>
                </thead>

                     <!-- <li class="list-group-item" *ngFor="let fournisseur of fournisseurs">-->
                      <!--<app-task-item ></app-task-item>-->
                 <tbody>    
                    <tr  > 
                        <td>{{codeVariete}}</td>     
                        <td>{{quantite}}</td>
                        <td>{{prixAchat}}</td>
                        <td>{{montant}}</td> 
                        <td>
                            <button class="btn btn-danger">Delete</button> 

                        </td> 
                    </tr> 
                </tbody> 
                     <!--</li>
               </ul!>-->
            </table>

Я не знаю, что делать дальше, чтобы создать форму, связанную с моей таблицей. заранее спасибо