时间戳

首页 > 解决方案 > 带一个输入的切换器的角形

angular - 带一个输入的切换器的角形

问题描述

我有带有部件切换器的组件，用户应在其中填写输入字段（T1、T2、T3）。T1 默认打开。在填写第 1 部分后，用户单击提交并将数据发送到服务器，然后单击 T2 - 提交，然后单击 T3 - 提交。现在我需要发送值，填写所有部分后，但是当我填写 T1 提交按钮变为活动状态时，单击 T2 输入字段变得清晰并且提交按钮变为禁用。

是否有可能使用一个输入的表单来获取所有 3 个值，然后在提交时发送它们。

<ng-container *ngIf="value.PartId == activatedPart">
    <app-send-value [activatedPart]="activatedPart"></app-send-value>
</ng-container> 

and in <app-send-value> I have form with mat-input


    <form (ngSubmit)="onSubmit()" >
        <mat-form-field>
            <input matInput
                   type="number"
                   required
                   value="{{value}}"
                   [(ngModel)]="value">
        </mat-form-field>

            <button type="submit"
                    [disabled]="sendValue.invalid">
                Submit
            </button>
    </form>

我的表格

标签： angular

解决方案

根据您的 stackblitz 示例更新：请修改如下

send.component.html ：

<form class="value-form"
          id="sendValue"
          (ngSubmit)="onSubmit()"
          autocomplete="off"
          #sendValue="ngForm">
            <input matInput
                   class="value-input"
                   type="number"
                   name="value"
           placeholder="fill the field"
           onfocus="this.value=''"
                   id="value"
                   required
                   [(ngModel)]="value[activatedPart - 1]">
        <div class="send-form-buttons">
            <button class="app-btn-success-sm"
                    type="submit"
                    [disabled]="checkDisabled()">
                Submit
            </button>
        </div>
    </form>

发送.component.ts ：

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-send',
  templateUrl: './send.component.html',
  styleUrls: ['./send.component.css']
})
export class SendComponent implements OnInit {
  constructor() { }

@Input() activatedPart = 0;
@Input() switchesLength = 0;
value: number[] = [];

  ngOnInit() {
  }

  get formInvalid() {
        return false
    }

  onSubmit() {
        if (this.formInvalid) return;

    console.log(this.value)
  }

  checkDisabled() {
    if(Array.isArray(this.value) && this.value.length === 3) {
      return !this.value.every(function(element) {return !!element;}); 
    }
    return true;
  }
}

您只需this.value = [];在提交功能上写入并 onfocus="this.value=''"从<input>标签中删除即可清除提交的值

推荐阅读