Question

我有一个角形。如果有错误，则html元素将从类更改。我用ng-class做到这一点。有2个表单元素构成一个子formGroup。在这里出错了。请注意，这两个元素调用了不同的函数。如果我加载页面，我得到这个：

在Bedrijfsgegevens，布局错误，因为它没有上课。我在控制台中收到此错误：

Cannot find control with name: 'telephone'
Cannot find control with name: 'mobilePhone'

现在怪异的部分是，如果您在窗口中单击，它将得到更新，并且一切正常。像这样：这是我的组件代码，正常情况下，组件使用getClass（），子组件使用getChildClass（）：

export class RegistrationComponent implements OnInit {

  registerForm: FormGroup;
  bool:boolean = false;
  rizivForm: FormGroup;
  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.registerForm = this.formBuilder.group({
      name:['',[Validators.required,Validators.minLength(2),Validators.maxLength(15)]],
      firstName:['',[Validators.required,Validators.minLength(2),Validators.maxLength(15)]],
      email:['', [Validators.required,Validators.email]],
      checkbox:[],
      companyName:['',[Validators.minLength(2),Validators.maxLength(30)]],
      taxNumber:['',[Validators.pattern("[A-Z]{2}[0-9]{10}"), btwValidator]],
      streetName:['', Validators.required],
      houseNumber:['',[Validators.required,Validators.pattern("[0-9]{1,5}")]],
      bus:['',Validators.pattern("[0-9]*")],
      zipCode:['',[Validators.required,Validators.pattern("[0-9]{4}")]],
      place:['',[Validators.required,Validators.minLength(2),Validators.maxLength(30)]],
      fstreetName:[''],
      fhouseNumber:['',Validators.pattern("[0-9]*")],
      fbus:['',Validators.pattern("[0-9]*")],
      fzipCode:['',Validators.pattern("[0-9]{4}")],
      fplace:[''],
      privacy:['',[Validators.requiredTrue]],
      rizivNumber:['',[Validators.pattern("[0-9]{8}"),rizivValidator]],
      type:['',Validators.required],
      phones: this.formBuilder.group({
        telephone:['',[Validators.required,Validators.pattern("[0-9]{7,15}")]],
        mobilePhone:['',[Validators.pattern("[0-9]{10}")]],
      })
    });
    this.formControlValueChanged();
  }

   updateForm(): void {
    this.bool = !this.bool;
    if(this.bool){
     this.setFvalidators();
    }else{
      this.clearFvalidators();
    }
    this.updateFvalidators();
  }



  formControlValueChanged() {
    this.registerForm.get('checkbox').valueChanges.subscribe(
        (mode: string) => {
            this.updateForm();
        });
}

setFvalidators(){
  this.registerForm.root.get('fstreetName').setValidators([Validators.required,Validators.minLength(2)]);
  this.registerForm.root.get('fhouseNumber').setValidators(Validators.required);
  this.registerForm.root.get('fzipCode').setValidators([Validators.required,Validators.minLength(4)]);
  this.registerForm.root.get('fplace').setValidators([Validators.required,Validators.minLength(2)]);
}

clearFvalidators(){
  this.registerForm.root.get('fstreetName').clearValidators();
  this.registerForm.root.get('fstreetName').reset();
  this.registerForm.root.get('fhouseNumber').clearValidators();
  this.registerForm.root.get('fhouseNumber').reset();
  this.registerForm.root.get('fzipCode').clearValidators();
  this.registerForm.root.get('fzipCode').reset();
  this.registerForm.root.get('fplace').clearValidators();
  this.registerForm.root.get('fplace').reset();
}

updateFvalidators(){
  this.registerForm.root.get('fstreetName').updateValueAndValidity();
  this.registerForm.root.get('fhouseNumber').updateValueAndValidity();
  this.registerForm.root.get('fzipCode').updateValueAndValidity();
  this.registerForm.root.get('fplace').updateValueAndValidity();
}

getClass(text:string){
  var input = this.registerForm.get(text);
  if(input.invalid && input.touched){
    return "input-group has-error"
  }else{
    return "input-group";
  }
}
getChildClass(text:string){
  var input = this.registerForm.get("phones").get(text);
  if(input.invalid && input.touched){
    return "input-group has-error"
  }else{
    return "input-group";
  }
}
public onFormSubmit() {
  if(this.registerForm.valid) {
    let user = new NewCustomer();
      user = this.registerForm.value;
      console.log(user)
      /* Any API call logic via services goes here */
  }
}
}

我的html代码：

<form [formGroup]="registerForm" (ngSubmit)="onFormSubmit()">
        <div class="container-fluid">
            <h3>Account informatie</h3>
            <div class="row">
                <div class="col-md-6">
                    <div [ngClass]="getClass('name')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                        <input type="text" class="form-control" formControlName="name" placeholder="Achternaam*">
                    </div>
                    <div [ngClass]="getClass('firstName')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                        <input type="text" class="form-control" formControlName="firstName" placeholder="Voornaam*">
                    </div>
                    <div [ngClass]="getClass('email')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
                        <input type="email" class="form-control" formControlName="email" placeholder="Email*">
                    </div>
                </div>
                <div class="col-md-6">
                    <div [ngClass]="getChildClass('telephone')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
                        <input type="tel" class="form-control" formControlName="telephone" placeholder="Telefoon*">
                    </div>
                    <div [ngClass]="getChildClass('mobilePhone')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
                        <input type="tel" class="form-control" formControlName="mobilePhone" placeholder="GSM">
                    </div>
                    <div [ngClass]="getClass('type')">
                        <label for="sel1">Type klant:</label>
                        <select  value="type klant" class="form-control" formControlName="type" >
                            <option>Particulier</option>
                            <option>Zorgprofessional met RIZIV-nummer</option>
                            <option>Zorgvoorziening</option>
                            <option>Andere professional</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <h3>Bedrijfsgegevens</h3>
            <div class="row">
                <div class="col-md-6">
                    <div [ngClass]="getClass('companyName')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
                        <input type="text" class="form-control" formControlName="companyName" placeholder="Bedrijfsnaam">
                    </div>
                    <div [ngClass]="getClass('rizivNumber')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
                        <input type="number" class="form-control"formControlName="rizivNumber" placeholder="RIZIV-nummer">
                    </div>
                    <div [ngClass]="getClass('taxNumber')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
                        <input type="text" class="form-control" formControlName="taxNumber" placeholder="BTW-nummer">
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <h3>Afleveradres</h3>
            <div class="row">
                <div class="col-md-6">
                    <div [ngClass]="getClass('streetName')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-road"></i></span>
                        <input type="text" class="form-control" formControlName="streetName" placeholder="Straatnaam*">
                    </div>
                    <div [ngClass]="getClass('houseNumber')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-sound-5-1"></i></span>
                        <input type="number" class="form-control" formControlName="houseNumber" placeholder="Huisnummer*">
                    </div>
                    <div [ngClass]="getClass('bus')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-inbox"></i></span>
                        <input type="text" class="form-control" formControlName="bus" placeholder="Bus">
                    </div>


                </div>
                <div class="col-md-6">
                    <div [ngClass]="getClass('zipCode')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-inbox"></i></span>
                        <input type="number" class="form-control" formControlName="zipCode" placeholder="Postcode*">
                    </div>
                    <div [ngClass]="getClass('place')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-inbox"></i></span>
                        <input type="text" class="form-control" formControlName="place" placeholder="Plaats*">
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid" *ngIf="bool">
            <h3>Facturatie adres</h3>
            <div class="row">
                <div class="col-md-6">
                    <div [ngClass]="getClass('fstreetName')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-road"></i></span>
                        <input type="text" class="form-control" formControlName="fstreetName" placeholder="Straatnaam*">
                    </div>
                    <div [ngClass]="getClass('fhouseNumber')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-sound-5-1"></i></span>
                        <input type="number" class="form-control" formControlName="fhouseNumber" placeholder="Huisnummer*">
                    </div>
                    <div [ngClass]="getClass('fbus')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-inbox"></i></span>
                        <input type="text" class="form-control" formControlName="fbus" placeholder="Bus">
                    </div>


                </div>
                <div class="col-md-6">
                    <div [ngClass]="getClass('fzipCode')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-inbox"></i></span>
                        <input type="number" class="form-control" formControlName="fzipCode" placeholder="Postcode*">
                    </div>
                    <div [ngClass]="getClass('fplace')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-inbox"></i></span>
                        <input type="text" class="form-control" formControlName="fplace" placeholder="Plaats*">
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-6">
                    <div class="input-group">
                        <input type="checkbox" formControlName="checkbox"  name="">Facturatie adres is verschillend van afleveradres<br>
                    </div>
                    <div [ngClass]="getClass('privacy')">
                        <input type="checkbox" formControlName="privacy"  name="">Ik accepteer de <a href="https://www.caredeal.be/wp-content/uploads/2018/08/HL_Algemene-Verkoopsvoorwaarden_010818.pdf">algemene verkoopsvoorwaarden</a> en heb de <a href="https://www.caredeal.be/wp-content/uploads/2018/07/Disclaimer_NL_250718.pdf">privacy disclaimer</a> gelezen.<br>
                    </div>
                    <div class="input-group">
                        <button type="submit" [disabled] = "!registerForm.valid" class="btn btn-primary">Submit</button>
                    </div>
                </div>
            </div>
        </div>
</form>

有人知道我为什么会经历这种奇怪的行为吗？感谢您的帮助。

Answer 1

Its safe to add input in the condition

    getClass(text:string){
      var input = this.registerForm.get(text);
      if(input && input.invalid && input.touched){
        return "input-group has-error"
      }else{
        return "input-group";
      }
    }
    getChildClass(text:string){
      var input = this.registerForm.get("phones").get(text);
      if(input && input.invalid && input.touched){
        return "input-group has-error"
      }else{
        return "input-group";
      }
    }

Also, might be an issue while accessing this.registerForm.get("phones"); in getChildClass method. Did you try console.log(this.registerForm.get("phones")). Are you getting the controls?.

Also try to avoid calling functions for each for element. It will have a performance impact. instead use inline code in the HTML.

<form [formGroup]="registerForm" (ngSubmit)="onFormSubmit()">
        <div class="container-fluid">
            <h3>Account informatie</h3>
            <div class="row">
                <div class="col-md-6">
                    <div [ngClass]="getClass('name')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                        <input type="text" class="form-control" formControlName="name" placeholder="Achternaam*">
                    </div>
                    <div [ngClass]="getClass('firstName')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                        <input type="text" class="form-control" formControlName="firstName" placeholder="Voornaam*">
                    </div>
                    <div [ngClass]="getClass('email')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
                        <input type="email" class="form-control" formControlName="email" placeholder="Email*">
                    </div>
                </div>
                <div class="col-md-6" formGroupName="phones">
                    <div [ngClass]="getChildClass('telephone')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
                        <input type="tel" class="form-control" formControlName="telephone" placeholder="Telefoon*">
                    </div>
                    <div [ngClass]="getChildClass('mobilePhone')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
                        <input type="tel" class="form-control" formControlName="mobilePhone" placeholder="GSM">
                    </div>
                    <div [ngClass]="getClass('type')">
                        <label for="sel1">Type klant:</label>
                        <select  value="type klant" class="form-control" formControlName="type" >
                            <option>Particulier</option>
                            <option>Zorgprofessional met RIZIV-nummer</option>
                            <option>Zorgvoorziening</option>
                            <option>Andere professional</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <h3>Bedrijfsgegevens</h3>
            <div class="row">
                <div class="col-md-6">
                    <div [ngClass]="getClass('companyName')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
                        <input type="text" class="form-control" formControlName="companyName" placeholder="Bedrijfsnaam">
                    </div>
                    <div [ngClass]="getClass('rizivNumber')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
                        <input type="number" class="form-control"formControlName="rizivNumber" placeholder="RIZIV-nummer">
                    </div>
                    <div [ngClass]="getClass('taxNumber')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
                        <input type="text" class="form-control" formControlName="taxNumber" placeholder="BTW-nummer">
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <h3>Afleveradres</h3>
            <div class="row">
                <div class="col-md-6">
                    <div [ngClass]="getClass('streetName')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-road"></i></span>
                        <input type="text" class="form-control" formControlName="streetName" placeholder="Straatnaam*">
                    </div>
                    <div [ngClass]="getClass('houseNumber')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-sound-5-1"></i></span>
                        <input type="number" class="form-control" formControlName="houseNumber" placeholder="Huisnummer*">
                    </div>
                    <div [ngClass]="getClass('bus')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-inbox"></i></span>
                        <input type="text" class="form-control" formControlName="bus" placeholder="Bus">
                    </div>


                </div>
                <div class="col-md-6">
                    <div [ngClass]="getClass('zipCode')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-inbox"></i></span>
                        <input type="number" class="form-control" formControlName="zipCode" placeholder="Postcode*">
                    </div>
                    <div [ngClass]="getClass('place')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-inbox"></i></span>
                        <input type="text" class="form-control" formControlName="place" placeholder="Plaats*">
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid" *ngIf="bool">
            <h3>Facturatie adres</h3>
            <div class="row">
                <div class="col-md-6">
                    <div [ngClass]="getClass('fstreetName')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-road"></i></span>
                        <input type="text" class="form-control" formControlName="fstreetName" placeholder="Straatnaam*">
                    </div>
                    <div [ngClass]="getClass('fhouseNumber')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-sound-5-1"></i></span>
                        <input type="number" class="form-control" formControlName="fhouseNumber" placeholder="Huisnummer*">
                    </div>
                    <div [ngClass]="getClass('fbus')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-inbox"></i></span>
                        <input type="text" class="form-control" formControlName="fbus" placeholder="Bus">
                    </div>


                </div>
                <div class="col-md-6">
                    <div [ngClass]="getClass('fzipCode')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-inbox"></i></span>
                        <input type="number" class="form-control" formControlName="fzipCode" placeholder="Postcode*">
                    </div>
                    <div [ngClass]="getClass('fplace')">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-inbox"></i></span>
                        <input type="text" class="form-control" formControlName="fplace" placeholder="Plaats*">
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-6">
                    <div class="input-group">
                        <input type="checkbox" formControlName="checkbox"  name="">Facturatie adres is verschillend van afleveradres<br>
                    </div>
                    <div [ngClass]="getClass('privacy')">
                        <input type="checkbox" formControlName="privacy"  name="">Ik accepteer de <a href="https://www.caredeal.be/wp-content/uploads/2018/08/HL_Algemene-Verkoopsvoorwaarden_010818.pdf">algemene verkoopsvoorwaarden</a> en heb de <a href="https://www.caredeal.be/wp-content/uploads/2018/07/Disclaimer_NL_250718.pdf">privacy disclaimer</a> gelezen.<br>
                    </div>
                    <div class="input-group">
                        <button type="submit" [disabled] = "!registerForm.valid" class="btn btn-primary">Submit</button>
                    </div>
                </div>
            </div>
        </div>
</form>

角ng级未定义错误

1 个答案: