时间戳

首页 > 解决方案 > “AbstractControl”类型上不存在属性“控件”。”

angular - “AbstractControl”类型上不存在属性“控件”。”

问题描述

问题背后的原因是什么>？

类型“AbstractControl”上不存在属性“控件”

<password-strength-bar [password]="registerForm.controls.passwords.controls.password.value"

#html代码

<div class="form-group row" formGroupName="passwords">
    <label for="" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" formControlName="password"
        [class.is-invalid]="registerForm.controls.passwords.controls.password.touched && registerForm.controls.passwords.controls.password.invalid">

      <password-strength-meter [password]="registerForm.controls.passwords.controls.password.value"
        (strengthChange)="onStrengthChange($event)">
      </password-strength-meter>

      <div *ngIf="registerForm.controls.passwords.controls.password.touched">
        <div class="text-danger"
          *ngIf="registerForm.controls.passwords.controls.password.touched && registerForm.controls.passwords.controls.password.hasError('required')">
          Password is required</div>
      </div>
    </div>
  </div>

＃代码

public registerForm = this.fb.group({
    email     : ['', 
                [Validators.required, Validators.email], 
                [
                  // this.isEmailUnique.bind(this),
                  // DuplicateEmailValidator(this.apiService)
                ] //async validator(used as  in view)
              ],
    passwords : this.fb.group({
      password        : ['', Validators.compose([Validators.required])],
      confirmPassword : ['', Validators.compose([Validators.required])]
    }, {
  }),
});

标签： angulartypescript

解决方案

passwords您可以在 .ts 文件中为该组创建一个 getter 。

registerForm: FormGroup;

public get passwordsGroup(): FormGroup {
    return this.registerForm.get('passwords') as FormGroup;
  }

constructor(private fb: FormBuilder) { }

ngOnInit() {
  this.buildForm();
}

buildForm() {
 this.registerForm = this.fb.group({
    email     : ['', 
                [Validators.required, Validators.email], 
                [
                  // this.isEmailUnique.bind(this),
                  // DuplicateEmailValidator(this.apiService)
                ] //async validator(used as  in view)
              ],
    passwords : this.fb.group({
      password        : ['', Validators.compose([Validators.required])],
      confirmPassword : ['', Validators.compose([Validators.required])]
    }, {
  }),
});
}

然后在 HTML

<password-strength-meter [password]="passwordsGroup?.get('password')?.value"
        (strengthChange)="onStrengthChange($event)">
      </password-strength-meter>

或（应该有效，需要测试）

<password-strength-meter [password]="passwordsGroup?.value?.password"
        (strengthChange)="onStrengthChange($event)">
      </password-strength-meter>

推荐阅读