angular:带验证功能的formControlName的select下拉框数据充填

解决方法：

使用一个自定义函数进行设定。

FormGroup定义之后，进行初始化，用于表单验证。

ngOnInit(): void {
    console.log("----->"+this.itemUser);
    console.log(this.itemUser.role_id);
    console.log(this.itemUser.major);

    this.validateForm = this.fb.group({
      nickname: [this.itemUser.username, [Validators.required,Validators.minLength(2)]],
     // password: [this.itemUser.password, [Validators.required]],
     // checkPassword: [null, [Validators.required, this.confirmationValidator]],
      role: [null, [Validators.required]],
      email: [this.itemUser.email, [Validators.email, Validators.required]],
      major:[this.itemUser.major_id, [Validators.required]],
      school:[this.itemUser.school_id, [Validators.required]]
    });
    //this.validateForm.get("role").setValue({'roleId':this.itemUser.role_id,'roleName':this.itemUser.role});
    this.validateForm.get("role").setValue(this.itemUser.role_id);
    //thisvalidateFrom.get("")
    this.getSchools();
    this.getMajors();
    this.getRoles();//获取用户角色
    //console.log(this.schools);
  }

前端页面：

<div>
  <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="nickname" nzRequired>
          <span>
            用户名称:
            <i
              nz-icon
              nz-tooltip
              nzTitle="What do you want other to call you"
              type="question-circle"
              theme="outline"
            ></i>
          </span>
      </nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input id="nickname" formControlName="nickname" />
        <nz-form-explain *ngIf="validateForm.get('nickname')?.dirty && validateForm.get('nickname')?.errors"
        >
          <ng-container *ngIf="validateForm.get('nickname')?.hasError('required')">
            请输入用户名!
          </ng-container>
          <ng-container *ngIf="validateForm.get('nickname')?.errors.minlength">
            用户名长度不小于2！
          </ng-container>
        </nz-form-explain
        >

      </nz-form-control>
    </nz-form-item>

    <!--<nz-form-item>-->
      <!--<nz-form-label [nzSm]="6" [nzXs]="24" nzFor="password" nzRequired>密码:</nz-form-label>-->
      <!--<nz-form-control [nzSm]="14" [nzXs]="24">-->
        <!--<input-->
          <!--nz-input-->
          <!--type="text"-->
          <!--id="password"-->
          <!--formControlName="password"-->
          <!--(ngModelChange)="updateConfirmValidator()"-->
        <!--/>-->
        <!--<nz-form-explain *ngIf="validateForm.get('password')?.dirty && validateForm.get('password')?.errors"-->
        <!--&gt;请输入密码!</nz-form-explain-->
        <!--&gt;-->
      <!--</nz-form-control>-->
    <!--</nz-form-item>-->
    <!--<nz-form-item>-->
      <!--<nz-form-label [nzSm]="6" [nzXs]="24" nzFor="checkPassword" nzRequired>确认密码:</nz-form-label>-->
      <!--<nz-form-control [nzSm]="14" [nzXs]="24">-->
        <!--<input nz-input type="password" formControlName="checkPassword" id="checkPassword" />-->
        <!--<nz-form-explain-->
          <!--*ngIf="validateForm.get('checkPassword')?.dirty && validateForm.get('checkPassword')?.errors"-->
        <!--&gt;-->
          <!--<ng-container *ngIf="validateForm.get('checkPassword')?.hasError('required')">-->
            <!--请输入确认密码!-->
          <!--</ng-container>-->
          <!--<ng-container *ngIf="validateForm.get('checkPassword')?.hasError('confirm')">-->
            <!--密码输入不一致!-->
          <!--</ng-container>-->
        <!--</nz-form-explain>-->
      <!--</nz-form-control>-->
    <!--</nz-form-item>-->

    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="role" nzRequired>用户角色 </nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <!--<nz-select style="width: 120px;" [(ngModel)]="selectedValue" [ngModelOptions]="{standalone: true}" nzAllowClear nzPlaceHolder="请选择用户角色">-->
        <nz-select style="width: 180px;" formControlName="role" [compareWith]="compareFn"  nzAllowClear nzPlaceHolder="请选择用户角色">
          <nz-option *ngFor="let item of roles" nzValue="{{item.roleId}}" nzLabel="{{item.roleName}}"></nz-option>
          <!--<nz-option  nzValue="{{itemUser.role}}" nzLabel="{{itemUser.role}}"></nz-option>  -->

        </nz-select>
        <nz-form-explain *ngIf="validateForm.get('role')?.dirty && validateForm.get('role')?.errors"
        >请选择用户角色!</nz-form-explain
        >
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="email">E-mail</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input formControlName="email" id="email" />
        <nz-form-explain
          *ngIf="validateForm.get('email')?.dirty && validateForm.get('email')?.errors"
        >
          <ng-container *ngIf="validateForm.get('email')?.hasError('required')">
            请输入用户邮箱!
          </ng-container>

          <ng-container *ngIf="!validateForm.get('email')?.hasError('required')">
            E-mail 不合法!
          </ng-container>
        </nz-form-explain>

      </nz-form-control>
    </nz-form-item>


    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="major" nzRequired>专业 </nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <nz-select style="width: 180px;" formControlName="major"   [compareWith]="compareFn" nzAllowClear nzPlaceHolder="请选择用户专业">
          <nz-option *ngFor="let item of majors" nzValue="{{item.majorId}}" nzLabel="{{item.majorName}}"></nz-option>
        </nz-select>
        <nz-form-explain *ngIf="validateForm.get('major')?.dirty && validateForm.get('major')?.errors"
        >请选择专业!</nz-form-explain
        >
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="school" nzRequired>学校: </nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <nz-select style="width: 180px;" formControlName="school"  [compareWith]="compareFn" nzAllowClear nzPlaceHolder="请选择用户学校">
          <nz-option *ngFor="let item of schools" nzValue="{{item.schoolId}}"  nzLabel="{{item.schoolName}}"></nz-option>

        </nz-select>
        <nz-form-explain  *ngIf="validateForm.get('school')?.dirty && validateForm.get('school')?.errors"
        >请选择学校!</nz-form-explain
        >
      </nz-form-control>
    </nz-form-item>

    <nz-form-item nz-row style="margin-bottom:8px;">
      <nz-form-control [nzSpan]="14" [nzOffset]="6">
        <button nz-button nzType="primary" [disabled]="!validateForm.valid">修改</button>
      </nz-form-control>
    </nz-form-item>
  </form>
</div>

 重点看某个下拉菜单，比如角色，利用一个compareWith函数进行比较，这个函数会传入两个参数，一个在初始化时传入的值，

this.validateForm.get("role").setValue(this.itemUser.role_id);
//    role: [null, [Validators.required]], 第一个null也可以换成this.itemUser.role_id,从而初始化

当前传入的值是一个整数，那么前端的compareWith函数将会自动传另外一个参数为整数类型。

如果传入的值是一个字典类型，即如{“name”:zhagnsan,"age":14}这种，那么比较函数会将另外一个参数传入为字典类型。

比较函数如下：

 

  compareFn(o1: Object, o2: Object): boolean {
    //console.log("what--->"+o1);
    //console.log(o2);
    return o1 && o2 ? o1 == o2 : o1 === o2;
  }

 

参考的学习链接：https://www.angular.cn/api/forms/SelectControlValueAccessor