时间戳

首页 > 解决方案 > FormGroup 验证模型绑定相互覆盖 angular 8

angular - FormGroup 验证模型绑定相互覆盖 angular 8

问题描述

因为我有一个名为Staff.ts的模型，其中包含以下代码。

import {NgForm,
FormGroup,
FormControl,
Validators,
FormBuilder} from '@angular/forms'
export class Staff {
    Id:number = null;
    FirstName:string = "";
    LastName:string = "";
    UserName:string = "";
    Email:string = "";
    Title:string = "";
    CellPhoneNo:number = 0;
    PhoneNo:number = 0;
    Fax:number = 0;
    Type:string = "0";
    Status:string = "0";
    ProfilePic:string = "";
    CreatedDate:Date=null;
    UpdatedDate:Date=null;
    CreatedBy:string="";
    UpdatedBy:string="";
    SendEmail:boolean = false;
    SendPhone:boolean = false;
    Password:string = "";
    CnfPassword:string = "";        
    FormStaffGroup: FormGroup = null;
    constructor(){
        var _builder = new FormBuilder();
        this.FormStaffGroup = _builder.group({}); //Use the builder to create
        //control --> validation and 1 validation
        this.FormStaffGroup.addControl("StaffTextControl", 
                                          new FormControl('',Validators.required));
        //customer code control with required and 4 letter numeric collection
        let ValidTelephoneCollection = [];
        ValidTelephoneCollection.push(Validators.required);
        ValidTelephoneCollection.push(Validators.pattern("^[0-9]{10,10}$"));

        this.FormStaffGroup.addControl("StaffTelephoneControl", 
                                          new FormControl('',Validators.compose(ValidTelephoneCollection)));

        //ValidTelephoneCollection.pop(Validators.required);
        //this.FormStaffGroup.addControl("StaffPhoneControl", 
        //                                  new FormControl('',Validators.compose(ValidTelephoneCollection)));

        let ValidUserNameCollection = [];
        ValidUserNameCollection.push(Validators.required);
        ValidUserNameCollection.push(Validators.pattern("^[A-Za-z0-9]{0,10}$"));
        this.FormStaffGroup.addControl("StaffUserNameControl", 
                                          new FormControl('',Validators.compose(ValidUserNameCollection)));

        let ValidEmailCollection = [];
        ValidEmailCollection.push(Validators.required);
        ValidEmailCollection.push(Validators.pattern("^[A-Za-z0-9._%-]+@[A-Za-z0-9._%-]+\\.[a-z]{2,3}$"));
        this.FormStaffGroup.addControl("StaffEmailControl", 
                                          new FormControl('',Validators.compose(ValidEmailCollection)));

    }

我有一个名为StaffInfo.ts的组件，它在其中导入了这个Staff.ts模型，StaffInfo.ts现在有一个templateUrl: './StaffInfo.html'验证正在处理这个 HTML 页面的 post 方法，现在我试图在路由期间在页面加载时绑定模型也在发生，但问题是它继续覆盖其他模型，下面是一个示例。
我怀疑模型绑定问题是在Staff.ts上同样有验证。

this.FormStaffGroup.addControl("StaffTextControl", 
                                      new FormControl('',Validators.required));

并且
this.FormStaffGroup.addControl("StaffTelephoneControl", new FormControl('',Validators.compose(ValidTelephoneCollection)));
两者都被多次调用以进行验证，例如名字、姓氏、职务、密码和确认密码，使用StaffTextControl进行强制目的。它被绑定的代码如下。

async ngOnInit() {
await this.StaffModel;
this.StaffModel.FirstName = 'rrrraaaww';
this.StaffModel.LastName = 'kummmmm';
this.StaffModel.UserName = 'aaaww101';
this.StaffModel.Email = 'aaaww@email.com';
this.StaffModel.Title = 'Mr.';
this.StaffModel.Fax = 123123123;}

我怎样才能停止这种覆盖。

下面是 StaffInfo.html 的 HTML 模板。

<form [formGroup]="StaffModel.FormStaffGroup">
<div class="row m-t-15" style="background:#FFF; padding-right:2%;padding-bottom:5%;">
<div class="form-group row m-b-10">
                                    <label class="col text-md-right col-form-label">First Name *</label>
                                    <div class="col">
                                        <input type="text" formControlName = "StaffTextControl" [(ngModel)]="StaffModel.FirstName" name="firstname" placeholder="" class="form-control">
                                    </div>

                                    <label class="col text-md-right col-form-label">Last Name *</label>
                                    <div class="col">
                                        <input type="text" formControlName = "StaffTextControl" [(ngModel)]="StaffModel.LastName" name="lastname" placeholder="" class="form-control">
                                    </div>
                                </div>

<div class="form-group row m-b-10">
                                <label class="col text-md-right col-form-label">User Name*</label>
                                <div class="col">
                                    <input type="text" formControlName = "StaffUserNameControl" [(ngModel)]="StaffModel.UserName" name="username" placeholder="" class="form-control">
                                </div>


                                <label class="col text-md-right col-form-label">Email*</label>
                                <div class="col">
                                    <input type="text" formControlName = "StaffEmailControl" [(ngModel)]="StaffModel.Email" name="email" placeholder="" class="form-control">
                                </div>




                            </div>
<div class="form-group row m-b-10">
                                <label class="col text-md-right col-form-label">Title</label>
                                <div class="col">
                                    <input type="text" formControlName = "StaffTextControl" [(ngModel)]="StaffModel.Title" placeholder="" class="form-control">
                                </div>
                                <label class="col text-md-right col-form-label">Cell Phone Number</label>
                                <div class="col">
                                    <input type="text" formControlName = "StaffTelephoneControl" [(ngModel)]="StaffModel.CellPhoneNo" name="Cell Phone Number" placeholder="" class="form-control">
                                </div>
                            </div>
<div class="form-group row m-b-10">
                                <label class="col text-md-right col-form-label">Phone Number*</label>
                                <div class="col">
                                    <input type="text" formControlName = "StaffTelephoneControl" [(ngModel)]="StaffModel.PhoneNo" name="ic" placeholder="" class="form-control">
                                </div>
                                <label class="col text-md-right col-form-label">Fax</label>
                                <div class="col">
                                    <input type="text" formControlName = "StaffTelephoneControl" [(ngModel)]="StaffModel.Fax" name="Fax" name="Fax" placeholder="" class="form-control">
                                </div>



                            </div>
<div class="form-group row m-b-10">
                                <label class="col text-md-right col-form-label">Password*</label>
                                <div class="col">
                                    <input formControlName = "StaffTextControl" [(ngModel)]="StaffModel.Password" type="password" name="ic" placeholder="" class="form-control">
                                </div>
                                <label class="col text-md-right col-form-label">Confirm Password*</label>
                                <div class="col">
                                    <input formControlName = "StaffTextControl" [(ngModel)]="StaffModel.CnfPassword" type="password" name="ic" placeholder="" class="form-control">
                                </div>

                            </div>

标签： angulartypescriptangular2-routingangular8

解决方案

正如我所想，您只能将 1 个控件绑定到 1 个元素才能使其正常工作。所以formControlName = "StaffTextControl"你需要制作一个firstNameControl和lastNameControl。其他控件相同

推荐阅读