FormGroup验证模型绑定互相覆盖角度8

Question

因为我有一个名为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方法进行页面，因为我正在尝试在路由过程中在页面加载时绑定模型，这也正在发生，但是问题是它一直保持覆盖其他模型，下面是一个示例。我怀疑Model Bind问题是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 = '[email protected]';
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>

Answer 1

正如我所想，您只能将1个控件绑定到1个元素，此元素才能正常工作。因此

formControlName =“ StaffTextControl”您需要制作一个firstNameControl和lastNameControl。其他控件相同