Question

我有一个8个角的表格，横跨4个选项卡，每个选项卡都有自己的表格，您需要在每个选项卡上填写每个问题才能解锁按钮进行保存。但是我可以转到第四个选项卡，输入这些问题，然后保存并提交整个内容，但没有前三个选项卡的答案。反正有我可以阻止这个吗？可能会弹出一个模态对话框，并告诉用户他们尚未完成所有问题

Answer 1

formgroup: FormGroup;
  ngOnInit() {
    this.formgroup = new FormGroup({
      firstName: new FormControl('' , [
        Validators.required
      ]),
      lastName: new FormControl('' , [
        Validators.required
      ]),
      email: new FormControl('' , [
        Validators.required
      ]),
      password: new FormControl('', [
        Validators.required
      ])
    });
  }
formSubmit() {
    if (this.formgroup.valid) {
      // Perform form submit task here get all fields values as
      // this.formgroup.value
    }
  }

<form [formGroup]="formgroup" (ngSubmit)="formSubmit()">
 <div class="tab-content">
  <div class="tab-pane fade show active p-3" id="one" role="tabpanel" aria-labelledby="one-tab">
              <h5 class="card-title">First Name</h5>
              <input type="text" placeholder="First Name" id="txtFirstName" formControlName="firstName">
              <button [disabled]="formgroup.controls.firstName.invalid" class="btn btn-primary" data-toggle="tab" href="#two" role="tab" aria-controls="Two">Next</button>
            </div>
            <div class="tab-pane fade p-3" id="two" role="tabpanel" aria-labelledby="two-tab">
              <h5 class="card-title">Last Name</h5>
              <input type="text" placeholder="Last Name" id="txtLastName" formControlName="lastName">
              <button [disabled]="formgroup.controls.lastName.invalid" class="btn btn-primary" data-toggle="tab" href="#three" role="tab" aria-controls="Three">Next</button>
            </div>
            <div class="tab-pane fade p-3" id="three" role="tabpanel" aria-labelledby="three-tab">
              <h5 class="card-title">Email</h5>
              <input type="email" placeholder="Email" id="txtEmail" formControlName="email">
              <button  [disabled]="formgroup.controls.email.invalid" class="btn btn-primary" data-toggle="tab" href="#four" role="tab" aria-controls="Four">Next</button>
            </div>
            <div class="tab-pane fade p-3" id="four" role="tabpanel" aria-labelledby="four-tab">
              <h5 class="card-title">Password</h5>
              <input type="password" placeholder="Password" id="txtPassword" formControlName="password">
              <button type="submit" class="btn btn-warning" [disabled]="formgroup.invalid">Submit</button>
            </div>
          </div>
        </form>

多个选项卡上的角度形式

1 个答案: