将许多输入输入到一个字符串中 angular 6答案

【问题标题】：make many input into one string angular 6将许多输入输入到一个字符串中 angular 6
【发布时间】：2018-12-07 16:28:37
【问题描述】：

我做了类似谷歌验证码的功能，用户必须输入发送到他们电子邮件的号码，并且用户必须将该代码输入验证页面我为用户输入了 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);
  }

谁能帮帮我谢谢你的帮助

【问题讨论】：

请附上您尝试过的代码。
呃，它只是一个带有 CSS 的文本框？
我已经做了我的打字稿

标签： json angular typescript

【解决方案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 示例

【讨论】：

但我必须使用角度材料

【解决方案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);
}

【讨论】：

{const field in this.otpform.controls} 中的“字段”是什么意思
字段将采用每个 fon 控制值。在。你的情况是 opt1，opt2 等等..你可以控制台相同

【解决方案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

【讨论】：