反应式表单验证始终有效 - Angular

Question

我正在尝试为 at 项目创建一些简单的反应式验证，但它一直将其返回为“有效”，即使它不应该是。 我正在尝试验证一个数字的长度，它必须在 7-16 位之间。

card-add-c.component.html

    <h1>Add credit card</h1>
    
    <form [formGroup]="addCardForm"> <!-- (ngSubmit)="onSubmit()">-->
    
      <div class="cross-validation" [class.cross-validation-error]="addCardForm.errors?.identityRevealed && addCardForm.touched">
        <label for="card_number">Card number</label>
        <input type="number" id="card_number" class="form-control" formControlName="card_number" required>
        <label *ngIf="card_number.invalid && card_number.touched" class="alert alert-danger">
          <div *ngIf="card_number.errors?.minLength">
            Name must be at least 7 characters long.
          </div>
          <div *ngIf="card_number.errors?.maxlength">
            Name must be 16 or less characters long.
          </div>
        </label>
      </div>
      <button class="button" type="submit" [disabled]="!addCardForm.valid">Add card</button>
      <p>Form Status: {{ addCardForm.status }}</p>
    </form>

card-add-c.component.ts

    import { Component, OnInit } from '@angular/core';
    import { cardService } from '../credit-card.service';
    import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
    import { Validators } from '@angular/forms';
    
    
    @Component({
      selector: 'app-card-add-c',
      templateUrl: './card-add-c.component.html',
      styleUrls: ['./card-add-c.component.css']
    })
    export class CardAddCComponent implements OnInit {
    
     
    
      ngOnInit(): void {
      }
    
      addCardForm = this.formBuilder.group({
        card_number: new FormControl('',  [Validators.required,  Validators.minLength(6), Validators.maxLength(16)]),
        // more here, but currently commented out, as I'm working on only card_number
      })
    
      constructor(
        private cardService: cardService,
        private formBuilder: FormBuilder,
        ) { }
    
    
      card = this.cardService.addCard(this.addCardForm.value);
    
    
      onSubmit():void{
    
    
        this.cardService.addCard(this.addCardForm.value).subscribe(res =>{
          
          console.log("Card " + this.addCardForm.value + " added!");
        })
    
        
        console.log("Card added");
      }
    
      get card_number() {
        return this.addCardForm.get('card_number')!;
      }
    
    }

我查看了很多文档，应该工作，但它没有。 要求的语句有效，但长度无效。 知道我做错了什么吗？

输出：

启动：

---

太少了

---

太多

Answer 1

minLength 和 maxLength 用于字符串，但您的输入类型是 number。

鉴于信用卡可以以0 开头，您可能需要更改输入机智text 并且可能只检查那里的数字。