Question

Posting an image of sample output我是Angular的新手。enter code here我已经动态添加了新行这是我的user.comoponent.html文件

    <body style="background-color:grey(48, 206, 206);">
    <div class="container">
    <div class="row topMargin">
    <h2 align="right">INFO</h2>
    </div>
    <div class="row topMargin">
    <div class="col-sm-3">
    <label for="jira">JIRA:</label>
    </div>
    <div class="col-sm-3">
    <input type="jira" [(ngModel)]="user.jira" [ngModelOptions]="{standalone: 
 true}" name="jira" class="form-control"
          id="jira" required>
      </div>
      <div class="col-sm-3">
      <label for="application">Application:</label>
      </div>
      <div class="col-sm-3">
      <input type="application" [(ngModel)]="user.application" [ngModelOptions]="{standalone: true}" name="application"
          class="form-control" id="application" required>
      </div>
      </div>

      <form nonvalidate [formGroup]="FormGroup">
      <div style="margin-top: 0px;" formGroupName="itemRows">
      <ng-container *ngIf='FormGroup.controls.itemRows!=null'>
      <div *ngFor="let itemrow of FormGroup.controls.itemRows.controls; let i=index" [formGroupName]="i">
      <div class="row topMargin">
      <div class="col-sm-3">


<label for="module">Module:</label>
          </div>
          <div id="moduleDiv" class="col-sm-3">
            <input type="module" [(ngModel)]="user.module" [ngModelOptions]="{standalone: true}" name="module"
              class="form-control" id="module" required>
          </div>
        </div>
        <div class="row topMargin">
          <div class="col-sm-3">
            <label for="testname">TestName:</label>
          </div>
          <div cl

ass="col-sm-3">
                <input type="testname" [(ngModel)]="user.testname" [ngModelOptions]="{standalone: true}" name="testname"
                  class="form-control" id="testname" required>
              </div>
              <div class="col-sm-3">
                <label for="testdescription">TestDescription:</label>
              </div>
              <div class="col-sm-3">
                <input type="testdescription" [(ngModel)]="user.testdescription" [ngModelOptions]="{standalone: true}"
                  name="testdescription" class="form-control" id="testdescription" required>
              </div>
            </div>
            <div class="row topMargin">
              <div class="col-sm-3">
                <label for="projects">Projects:</label>
              </div>
              <div class="col-sm-3">
                <input type="projects" [(ngModel)]="user.projects" [ngModelOptions]="{standalone: true}" name="projects"
                  class="form-control" id="projects" required>
              </div>
              <div class="col-sm-3">
                <label for="filechanges">FileChanges:</label>
              </div>
              <div class="col-sm-3">
                <input type="filechanges" [(ngModel)]="user.filechanges" [ngModelOptions]="{standalone: true}" name="filechanges"
                  class="form-control" id="filechanges" required>
              </div>
            </div>
            <div class="row topMargin">
              <div class="col-sm-3">
                <label for="impact">Impact:</label>
              </div>
              <div class="col-sm-3">
                <input type="impact" [(ngModel)]="user.impact" [ngModelOptions]="{standalone: true}" name="impact"
                  class="form-control" id="impact" required>
              </div>
              <div style="text-align: right">
              <button type="button" (click)="addRow()" class="btn btn-primary">+</button>
              </div>
            </div>
          </div>
        </ng-container>
      </div>
    </form>

    <div class="row topMargin" align="center">
      <button type="submit" class="btn btn-primary" (click)="createUser()">Submit</button>
    </div>

  </div>
</body>
enter code here
enter code here

这是我的user.component.ts文件

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { NgModule } from '@angular/core';
import { Model } from '../models/model.model';
import  UserService  from './user.service';
import {FormGroup, FormBuilder, FormArray } from '@angular/forms';

@Component({
  selector: 'app-user',
  templateUrl: './add-user.component.html',
  styleUrls: ['./add-user.component.css']

})

export class AddUserComponent  {

 public  FormGroup:FormGroup;

  user: Model = new Model();


  constructor(private router: Router, private userService: UserService, private _fb:FormBuilder) {

  }

ngOnInit(): void{
  this.FormGroup= this._fb.group({

    itemRows: this._fb.array([this.initItemRow()]),

  });

}
initItemRow(){
  return this._fb.group({
    module:[''],
    TestName: [''],
    TestDescription:[''],
    Projects: [''],
    FileChanges:[''],
    Impact:['']

  });
}
addRow(){
  const control=<FormArray>this.FormGroup.controls['itemRows'];
  control.push(this.initItemRow());
}


  createUser(): void {
    this.userService.createUser(this.user)
        .subscribe( data => {
                  alert("User created successfully.");

        });
this.user.jira='';
this.user.application='';
this.user.module='';
this.user.testname='';
this.user.testdescription='';
this.user.projects='';
this.user.filechanges='';
this.user.impact='';
  };

}

当我单击+按钮时，会添加新行，但是在输入数据时，前一个文本框和新文本框都将使用相同的数据。

将数据添加到新文本框中的问题

0 个答案: