Question

如何以Angular形式实现自定义formControlName？我想根据嵌套对象数组中的某些值启用/禁用复选框。

这是HTML的外观。

           <span class="col-md-2">
            <input type="checkbox"
                   name="userLookUpSource"
                   [(ngModel)]="systemUser"
                   [value]="1"
                   (change)="userLookUpSourceSourceChanged()" />
            <span>{{getMCText('SystemUser')}}</span>
          </span>
          <span class="col-md-3">
            <input type="checkbox"
                   name="userLookUpSource"
                   [(ngModel)]="adUser"
                   [value]="2"
                   (change)="userLookUpSourceSourceChanged()" />
            <span>{{getMCText('ActiveDirectoryUser')}}</span>
          </span>
          <span class="col-md-3">
            <input type="checkbox"
                   name="userLookUpSource"
                   [(ngModel)]="adGroup"
                   [value]="3"
                   (change)="userLookUpSourceSourceChanged()" />
            <span>{{getMCText('ActiveDirectoryGroup')}}</span>
          </span>
          <span class="col-md-2">
            <input type="checkbox"
                   name="userLookUpSource"
                   [(ngModel)]="applicationGroup"
                   [value]="4"
                   (change)="userLookUpSourceSourceChanged()" />
            <span>Application Security Group</span>
          </span>

现在单击它们的任何复选框，我想在数组中输入其值。以前我们使用这个。在ngmodelchange方法中。

userLookUpSourceSourceChanged() {
    this.request.Properties.userLookUpSource = [];
    if (this.systemUser) {
      this.request.Properties.userLookUpSource.push('1');
    }

    if (this.adUser) {
      this.request.Properties.userLookUpSource.push('2');
    }

    if (this.adGroup) {
      this.request.Properties.userLookUpSource.push('3');
    }

    if (this.applicationGroup) {
      this.request.Properties.userLookUpSource.push('4');
    }
  }

此外，当我使用现有对象编辑表单时，如何获取相同的数据。我可以做某事this.request.Properties.userLookUpSource.includes('4')并启用复选框吗？

Answer 1

使用以下代码创建打字稿文件“ request.ts”

export class Request {
  Properties: {
    userLookUpSource : any
  }
}

并在组件类中插入以下初始化代码

request : Request = {Properties : [] };

复选框更改功能

userLookUpSourceSourceChanged() : void {
        this.request.Properties.userLookUpSource = [];
        if (this.systemUser) {
            this.request.Properties.userLookUpSource.push('1');
        }
        if (this.adUser) {
            this.request.Properties.userLookUpSource.push('2');
        }

        if (this.adGroup) {
            this.request.Properties.userLookUpSource.push('3');
        }

        if (this.applicationGroup) {
             this.request.Properties.userLookUpSource.push('4');
        }
        console.log(this.request.Properties.userLookUpSource)
    }

在编辑过程中，我们需要根据先前的选择将以下值更新为true

 systemUser = false;
 adUser = false;
 adGroup = true;
 applicationGroup = true;

现在将选中最后两个复选框。

如果您有任何疑问，请告诉我们。

Angular反应形式中的自定义formControlName？

1 个答案: