Angular 4中的表单验证

Question

我正在使用twitter-bootstrap和jquery创建一个简单的Angular应用程序来显示Employees的数据。 4个数据是硬编码的，并在表格中显示，如附在其上的图像。我添加了“添加员工”按钮，弹出“模态”框，其中包含用于添加员工信息的表单。我也使用了验证，但它也提交了空数据。

以下是组件：

print sorted(visits_count.items())

employee-data.component.html

<div class="container"> <table class="table table-bordered table-condensed table-responsive"> <thead class="thead-inverse"> <tr> <td>Id</td> <td>Name</td> <td>Address</td> <td>Gender</td> <td>Company</td> <td>Action</td> </tr> </thead> <tbody> <tr *ngFor="let employee of employees; let i= index;"> <td> <input class="form-control" type="number" min="1" [(ngModel)]="employee.id" [disabled]="!employee.isEditable"> </td> <td> <input type="text" class="form-control" [(ngModel)]="employee.name" [disabled]="!employee.isEditable" > </td> <td> <input type="text" class="form-control" [(ngModel)]="employee.address" [disabled]="!employee.isEditable" > </td> <td> <input type="text" class="form-control" [(ngModel)]="employee.gender" [disabled]="!employee.isEditable" > </td> <td> <input type="text" class="form-control" [(ngModel)]="employee.company" [disabled]="!employee.isEditable" > </td> <td> <div> <!-- <button (click)="editEmployee(i)">Edit</button> --> <button class="btn btn-warning" (click)="employee.isEditable=!employee.isEditable" *ngIf="!employee.isEditable" > Edit </button> <button class="btn btn-warning" (click)="employee.isEditable=!employee.isEditable" *ngIf="employee.isEditable" > Save </button> <button class="btn btn-danger" (click)="deleteEmployee(i)"> Delete </button> </div> </td> </tr> </tbody> </table> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-success btn-md" data-toggle="modal" data-target="#myModal"> Add Employee </button> <!-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Add Employee</h4> </div> <!-- Modal Body --> <div class="modal-body"> <form [formGroup]="userForm" (ngSubmit)="addRow()"> <div class="form-group"> <label>Id</label> <div> <input type="number" class="form-control" formControlName="ModalId" name="id" [(ngModel)]="id" min="1" required /> <div class="alert alert-danger" *ngIf="!userForm.controls['ModalId'].valid && userForm.controls['ModalId'].touched"> Error! </div> </div> </div> <div class="form-group"> <label>Name</label> <div> <input type="text" class="form-control" formControlName="ModalName" name="name" [(ngModel)]="name" required /> </div> <div class="alert alert-danger" *ngIf="!userForm.controls['ModalName'].valid && userForm.controls['ModalName'].touched"> Error! </div> </div> <div class="form-group"> <label>Address</label> <div> <input type="text" class="form-control" formControlName="ModalAddress" name="address" [(ngModel)]="address" required /> <div class="alert alert-danger" *ngIf="!userForm.controls['ModalAddress'].valid && userForm.controls['ModalAddress'].touched"> Error! </div> </div> </div> <div class="form-group"> <label for="gender">Gender</label> <div> <!-- <input type="text" class="form-control" name="gender" [(ngModel)]="gender" required /> --> <select class="form-control" [(ngModel)]="gender" [ngModelOptions]="{standalone: true}" > <option value="Male">Male</option> <option value="Female">Female</option> </select> </div> </div> <div class="form-group"> <label>Company</label> <div> <input type="text" class="form-control" formControlName="ModalCompany" name="company" [(ngModel)]="company" required /> </div> <div class="alert alert-danger" *ngIf="!userForm.controls['ModalCompany'].valid && userForm.controls['ModalCompany'].touched"> Error! </div> </div> <div class="form-group"> <input type="submit" value="Submit" class="btn btn-success"> </div> </form> </div> <!-- Modal Footer --> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div>

employee-data.compenent.ts

任何人都可以帮助我，因为我已经没有选择了！

Answer 1

您正在混合反应形式和模板驱动形式。我猜你真正想要的是反应形式，因为你使用的是FormBuilder。

这是你需要做的。

删除html中的模板驱动代码

• 使用[(ngModel)]
删除所有代码

从userForm

获取值

从表单中获取值的方式是错误的 将您的addRow()更改为此

 addRow() {
     this.id =  this.userForm.controls['ModalId'].value;
     this.name = this.userForm.controls['ModalName'].value;
     //more code here.          
     //you get the picture and do the remaining data.
    this.employees.push({
        id: this.id,
        name: this.name,
        address: this.address,
        gender: this.gender,
        company: this.company,
        isEditable: this.isEditable

    });
  }

希望这有帮助。

Answer 2

我同意brijmcq，选择模板驱动或反应形式。不要将它们混合在一起。我会像这样构建表单，你可以将从表单中获得的对象推送到你的数组中。这样，只需更改表单控件名称，使它们与Employee接口/类匹配。

就像brijmcq建议的那样，删除与模板驱动表单相关的所有内容 - ngModel以及在模板中设置的任何验证器。请改为使用表单组：

this.userForm = this.formBuilder.group({
  id: ['', [Validators.minLength(1), Validators.required]],
  name: ['', Validators.required]
});

然后只需将表单控件名称标记为表单，然后在提交时传递表单值：

<form [formGroup]="userForm" (ngSubmit)="addRow(userForm.value)">  
  <label>Id</label>
  <input type="number" class="form-control" formControlName="id" />
  <div class="alert alert-danger" *ngIf="!userForm.controls['id'].valid && userForm.controls['id'].touched">
    Error!
  </div>
  <!-- more code here -->
</form>

然后添加员工的方法，只需将表单对象推送到数组并重置表单：

addRow(values) {
  this.employees.push(values);
  this.userForm.reset();
}

<强> StackBlitz