Javascript 如何检查所选动态表单输入是否满足某些条件

我对Angular还是比较陌生的，这个嵌套JSON的逻辑对我来说越来越好，所以我道歉

我希望创建一个动态的形式，并作为一个起点使用

我试图构建只有在用户选择某个选项时才会显示的条件字段。我希望它能够正常工作，这样，如果我的任何选项在数组中定义了子项，则会显示带有这些子项的后续输入作为选项。我还有很多事情要考虑，但是现在我正在尝试得到它，这样当用户选择选项2时，选项2a和选项2b自动出现在另一个下拉菜单下面。 如何创建一个ngIf*语句，该语句表示“如果当前选择的选项有子项，请将它们添加到另一个输入中”

我尝试过检查“children”的数组长度是否大于零，还创建了一个名为“haschilds”的布尔值，并手动指定了一个真/假值以进行检查（尽管我不喜欢这种解决方案，因为完成的应用程序将有许多嵌套选项，并且只检查数组是否为空会更容易）

我也试过了，但肯定是语法错误，因为它对我不起作用

HTML:

当用户选择“选项2”时，我希望得到包含选项“选项2A”和“选项2B”的第二个下拉列表的输出，但我得到了一个解析错误

---

非常感谢

我已修改了您的代码，请检查：

---

我认为您正在寻找级联下拉列表。上述解决方案可能会帮助您检查。

谢谢！这使得语法更容易理解。看起来我缺少了ngIf的ngFor包装器，这是有道理的。非常感谢您花时间让我的代码正常运行。然而，我注意到，当前逻辑只有在从下拉列表中选择值“option 2”时才起作用。是否有一种方法可以使任何具有子项的项（无论名称如何）在选择时都会生成一个辅助下拉列表？您可以使其更具动态性，但必须更改json对象数据，以确保您的childControll名称和父选项值必须相同。在这里，我更改了json对象并动态比较了值。希望能有帮助

<ng-template [ngSwitchCase]="'select'">
        <div class="form-group">
          <label [for]="input.controlName"> {{input.controlName}}</label>
          <select [formControlName]="input.controlName" [name]="input.controlName" [id]="input.controlName"
          [required]="input.validators.required">
          <option value="">{{input.placeholder}}</option>
          <option *ngFor="let option of input.options" [value]="option.value">{{option.optionName}}</option>
        </select>
      </div>
        <div *ngIf="this.input.options.children > 0" class="form-group">
          <label [for]="input.options.optionName">{{input.options.optionName}}</label>
          <select [formOptionName]="input.options.children.childName" [name]="input.options.children.childName" [id]="input.options.children.childName">
          <option *ngFor="let children of input.options.children" [value]="children.value">{{children.childName}}</option>
        </select>
        </div>
      </ng-template>

export interface FormData {
  controlName: string;
  controlType: string;
  valueType?: string;
  currentValue?: string;
  placeholder?: string;
  options?: Array<{
    optionName: string;
    value: string;
    hasChildren: boolean;
    children: Array<{
      childName: string;
      childValue: string;
    }>
  }>;
  validators?: {
    required?: boolean;
    minlength?: number;
    maxlength?: number;
  };
}

import { FormData } from './../interface/form-data';

export const MockForm: FormData[] = [
  {
    controlName: 'Options',
    placeholder: 'Choose an option',
    controlType: 'select',
    options: [{
      optionName: 'Option 1',
      value: 'option 1',
      hasChildren: false,
      children: []
      },
      {
      optionName: 'Option 2',
      value: 'option 2',
      hasChildren: true,
      children: [{
        childName: 'Option 2A',
        childValue: 'option 2a',
        },
        {
        childName: 'Option 2B',
        childValue: 'option 2b'
        }],
      }],
    validators: {
      required: true
    }
  }
]