带条件的angular 6中的动态表单验证，反之亦然

在带条件的Angular 6中的动态表单验证中，我们可以使用Angular的响应式表单来实现。

首先，我们需要创建一个FormGroup来包含动态表单的所有控件。使用FormBuilder可以更方便地创建和管理表单控件。

然后，我们可以根据条件来动态添加或删除验证规则。在Angular中，我们可以使用Validators来定义验证规则，例如required、minLength、maxLength等。我们可以根据条件在FormGroup中的控件上添加或删除这些Validators。

下面是一个示例代码：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.css']
})
export class DynamicFormComponent implements OnInit {
  dynamicForm: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.dynamicForm = this.formBuilder.group({
      input1: ['', Validators.required], // 默认情况下需要输入
      input2: [''] // 默认情况下不需要输入
    });

    // 根据条件动态添加或删除验证规则
    this.dynamicForm.get('input1').valueChanges.subscribe(value => {
      if (value === '条件满足') {
        this.dynamicForm.get('input2').setValidators([Validators.required, Validators.minLength(5)]);
      } else {
        this.dynamicForm.get('input2').clearValidators();
      }
      this.dynamicForm.get('input2').updateValueAndValidity();
    });
  }
}

在上述代码中，我们创建了一个动态表单，其中包含两个输入框input1和input2。默认情况下，input1是必填的，而input2是可选的。我们使用valueChanges订阅了input1的值的变化。当input1的值满足某个条件时（在示例代码中表示为"条件满足"），我们将动态地将required和minLength(5)这两个验证规则添加到input2上。反之，我们清除了input2上的所有验证规则。

这样，当用户输入满足条件时，input2将成为必填项，并且长度至少为5。当用户输入不满足条件时，input2将变为可选项。

这个示例中的动态表单验证只是一个简单的示例，实际应用中可能涉及更复杂的验证逻辑。但是，使用Angular的响应式表单和Validators，我们可以灵活地实现各种动态表单验证需求。

腾讯云相关产品和产品介绍链接地址：