角度4,验证者说表格无效

时间:2018-06-29 15:27:43

标签: javascript angular angular5 angular4-forms

我想用一个简单的验证器来测试我的字段的有效性,但是它一直说这是无效的。我的控制台也没有看到任何错误。

在我的 component.ts 文件中:

   this.oneClickForm = this.fb.group({
      pwdControl: ['', [Validators.required, Validators.minLength(7)]],
      pwdControl2: ['', [Validators.required, Validators.minLength(7)]]

    });

  get pwdControl() {
    return this.oneClickForm.get('pwdControl');
  }
  get pwdControl2() {
    return this.oneClickForm.get('pwdControl2');
  }

我的HTML

     <form [formGroup]="oneClickForm">
          <div *ngIf = "showErrors" class="alert alert-danger mb-0 form-errors">
            <span class="block">{{errorMsgOne}}</span>
            <span class="block">{{errorMsgTwo}}</span>
          </div>

       <div *ngIf="showErrors">
          <div *ngIf="pwdControl.hasError('minlength') || pwdControl2.hasError('minlength')"  class="alert alert-danger">
              <span>Password's length must be more than 6 characters</span>
          </div>
        <div *ngIf="pwdControl.hasError('maxlength') || pwdControl2.hasError('maxlength')"  class="alert alert-danger">
          <span>Password's length must be less than 30 characters</span>
      </div>
      <div *ngIf="pwdControl.hasError('regexPassword')">
          User name not valid.
     </div>
    </div>

          <div class="form-group">
            <label for="createPassword">Create your Password:</label>
            <input class="form-control" placeholder="Enter a password" name="pwd" type="password" formControlName="pwdControl" [pattern]="regexPassword">

            <small id="emailHelp" class="form-text text-muted">Don't share your password with anyone! :)</small>
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Re-enter Password:</label>
            <input class="form-control" placeholder="Re-enter above password" name="confirmPwd" type="password" formControlName="pwdControl2">
          </div>
          <button [disabled]="isLoading" type="submit" class="btn btn-primary px-4" [disabled] = "!oneClickForm.valid" (click) = "submit(pwd, confirmPwd)">
            <i *ngIf="isLoading" class="fa fa-spinner fa-spin"></i> Submit
        </button>

        </form>

        <p>Form value {{ oneClickForm.value | json }} </p>
        <p> Form status {{ oneClickForm.status | json}} </p>


  </div>

我在字段中输入了7个以上的字母,它表示我的表格仍然无效。我想念什么?

0 个答案:

没有答案