Question

我执行类似Google验证码的功能，用户必须输入发送至其电子邮件的号码，并且用户必须将验证码输入验证页我输入了6个代码供用户输入其代码：

每个都是具有不同名称的不同输入字段，例如input1，input2，input3等

我要使该不同名称仅具有一个值，并且只有一个值。像这样输入：（231486）

不是这样输入1：（2）输入2：（3）输入3：（1）等等

这是我的代码：

<form (ngSubmit)="otp(otpForm.value)" [formGroup]="otpForm">
            <div fxLayout="row" fxLayoutAlign="center">
              <table cellspacing="0" cellpadding="0">
                <tr>
                  <ng-container>
                    <td class="otp__tdr">
                      <mat-form-field class="otp__field">
                        <input
                          #input1
                          matInput
                          maxlength="1"
                          formControlName="otp1"
                          (input)="onInputEntry($event, input2)"
                        />
                      </mat-form-field>
                    </td>
                    <td>
                      <mat-form-field class="otp__field">
                        <input
                          #input2
                          matInput
                          maxlength="1"
                          formControlName="otp2"
                          (input)="onInputEntry($event, input3)"
                        />
                      </mat-form-field>
                    </td>
                    <td>
                      <mat-form-field class="otp__field">
                        <input
                          #input3
                          matInput
                          maxlength="1"
                          formControlName="otp3"
                          (input)="onInputEntry($event, input4)"
                        />
                      </mat-form-field>
                    </td>
          <button type="submit" mat-raised-button color="primary">
                Verify
              </button>
            </div>
          </form>

我的一些打字稿：

export class OtpComponent implements OnInit {

  otpForm: FormGroup;
  // FormControl = new FormControl('');

  constructor( private router: Router, private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.otpForm = this.formBuilder.group({
      otp1: ['', Validators.required],
      otp2: ['', Validators.required],
      otp3: ['', Validators.required],
      otp4: ['', Validators.required],
      otp5: ['', Validators.required],
      otp6: ['', Validators.required]
    });
  }

  onInputEntry(event, nextInput) {
    const input = event.target;
    const length = input.value.length;
    const maxLength = input.attributes.maxlength.value;

    if (length >= maxLength) {
      nextInput.focus();
    }
  }

  otp(otpForm) {
    console.log('test otp', otpForm);
  }

有人可以帮助我吗，谢谢您的帮助

Answer 1

输入没有什么特别的，只需将SCSS应用于您的输入即可：

$num-of-char: 6;
$char-width: 1ch;
$gap: .4 * $char-width;
$in-w: $num-of-char * ($char-width + ($gap));

input {
    display: block;
    border: none;
    width: $in-w;
    background: repeating-linear-gradient(90deg, 
        #000 0, #000 $char-width, 
        transparent 0, transparent $char-width + $gap) 
        0 100%/ #{$in-w - $gap} 2px no-repeat;
    font: 5ch droid sans mono, consolas, monospace;
    letter-spacing: $gap;

    &:focus {
        outline: none;
    }
}

<input maxlength='6' value='231486'/>

Stackblitz 示例

Answer 2

尝试使用forEach的formGroup数组进行循环

let inputData: string = '';

Object.keys(this.otpForm.controls).forEach((key) => {
       inputData += this.otpForm.get(key).value();
});

或者，您可以使用for..of，然后再加入数组

const inputData = [];
for (const field in this.otpForm.controls) {
   const inputvalue = this.otpForm.get(field).value(); 
   inputData.concat(inputvalue);
}

Answer 3

您需要具有几个变量，第一个是实际的字符串值，第二个将字符串值的每个字符保存到数组中。该数组将用于通过ngModel绑定输入值。

  varifyNumber = "231486";
  numbers = new Array(6);

  ngOnInit(){
     this.numbers = this.varifyNumber.split("");
  }

  public getVerifyNumber(){
    return this.numbers.join("");
  }

这是工作示例-https://stackblitz.com/edit/angular-z9hkfp

多输入一个角度为6的字符串

3 个答案: