我用Angular 15开发了一个应用程序。我使用一个手工编码的JSON和**JSON server**对“employees”JSON执行CRUD操作。
我目前正在为<select>元素添加一个自定义验证。
在employee-form.component.html中，我有：

<form class="modal-content" #employeeForm="ngForm" (ngSubmit)="addEmployee(employeeForm)">
    <!-- Modal Header -->
    <div class="modal-header py-2">
      <h4 class="modal-title">New employee</h4>
      <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
    </div>

    <!-- Modal body -->
    <div class="modal-body py-2">
      <div *ngIf="isSuccess" class="text-center alert alert-success">
        Employee added successfully!
      </div>

      <div class="position-relative mb-1">
          <label class="form-label" for="firstName">First name</label>
          <input type="text" class="form-control" name="firstname" id="firstName" placeholder="First name" [(ngModel)]="firstname" #first_name="ngModel" required/>
          <div *ngIf="first_name.touched && first_name.errors?.['required']"  class="invalid-feedback">First name is required.</div>
      </div>

      <div class="position-relative mb-1">
          <label class="form-label" for="lastName">Last name</label>
          <input type="text" class="form-control" name="lastname" id="lastName" placeholder="Last name" [(ngModel)]="lastname" #last_name="ngModel" required />
          <div *ngIf="last_name.touched && last_name.errors?.['required']"  class="invalid-feedback">Last name is required.</div>
      </div>

      <div class="position-relative mb-1">
        <label class="form-label d-block" for="avatar">Photo</label>
        <input type="file" class="file-upload-btn" name="avatar" id="avatar" [(ngModel)]="avatar" (change)="pickAvatar($event)">
      </div>

      <div class="position-relative mb-1">
          <label class="form-label" for="job">Job</label>
          <input type="text" class="form-control" name="job" id="job" placeholder="Job" [(ngModel)]="job" #job_title="ngModel" required  />
          <div *ngIf="job_title.touched && job_title.errors?.['required']" class="invalid-feedback">Job is required.</div>
      </div>

      <div class="position-relative mb-1">
        <label class="form-label" for="job">Skills</label>
        <input type="text" class="form-control" name="skills" id="skills" placeholder="Skills separated by comma" [(ngModel)]="skills"/>
    </div>

      <div class="position-relative mb-1">
        <label class="form-label" for="department">Department</label>
        <select class="form-select" name="department" id="department" [(ngModel)]="deptno" #emp_department="ngModel" required>
          <option value="-1">Pick a department</option>
          <option *ngFor="let department of departments" [value]="department.value">
            {{department.label}}
          </option>
        </select>
        <div *ngIf="emp_department.touched && emp_department.value == -1" class="invalid-feedback">You must pick a department</div>
      </div>

      <div class="position-relative mb-0">
          <label class="form-label d-block">Gender</label>
          <div class="form-check form-check-inline">
              <input type="radio" class="form-check-input" name="gender" id="male" value="male" [(ngModel)]="gender" />
              <label class="form-label" for="male">male</label>
          </div>
          <div class="form-check form-check-inline">
              <input type="radio" class="form-check-input" name="gender" id="femele" value="femele" [(ngModel)]="gender" />
              <label class="form-label" for="femele">femele</label>
          </div>
      </div>

      <div class="position-relative mb-1">
          <label class="form-label" for="bio">Bio</label>
          <textarea class="form-control" name="bio" id="bio" type="text" placeholder="Bio" [(ngModel)]="bio"></textarea>
      </div>
    </div>

    <!-- Modal footer -->
    <div class="modal-footer py-2">
      <button type="submit" class="btn btn-success" [disabled]="!employeeForm.valid">Add employee</button>
      <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
    </div>
</form>

在employee-form.component.ts中，我有：

import { Component } from '@angular/core';
import { Employee } from '../../models/empModel';
import { NgForm, FormGroup, Validator } from '@angular/forms';
import { HttpErrorResponse } from '@angular/common/http';
import { EmployeeService } from '../../services/employee.service';
import { EmployeeListComponent } from '../employee-list/employee-list.component';

@Component({
  selector: 'app-employee-form',
  templateUrl: './employee-form.component.html',
  styleUrls: ['./employee-form.component.scss']
})

export class EmployeeFormComponent {

  constructor(private employeeService: EmployeeService, private employeeListComponent: EmployeeListComponent) {
    this.deptno = -1;
    this.gender = 'male';
  }

  public empsArray: Employee[] = [];
  public departments: any[] = [
    {value: 10, label: 'Management'},
    {value: 20, label: 'Sales'},
    {value: 30, label: 'Software'},
    {value: 40, label: 'Finance'}
  ];
  public newEmployee: any = {}
  public empno: number = 0;
  public deptno: number = 0;
  public firstname: string = '';
  public lastname: string = '';
  public gender: string = '';
  public avatar: string = '';
  public job: string = '';
  public bio: string = '';
  public skills: string = '';
  public isSuccess: boolean = false;

  public pickAvatar(event: any) {
    let file = event.target.files[0];
    this.avatar = file.name;
  }

  public setAvatar() {
    this.newEmployee.avatar = this.avatar.length ? this.avatar : `${this.gender}.png`;
  }

  public validateDepartment(form: NgForm) {
   if (this.deptno == -1) {
    form.invalid;
   } 
  }

  public doSkillsArray() {
    this.newEmployee.skills = this.skills.split(',');
  }

  public addEmployee(form: NgForm) {

    this.newEmployee = {
      empno: this.empno,
      deptno: this.deptno,
      firstname: this.firstname,
      lastname: this.lastname,
      gender: this.gender,
      avatar: this.avatar,
      job: this.job,
      bio: this.bio,
      skills: this.skills
    };

    this.setAvatar();

    this.doSkillsArray();

    this.validateDepartment(form);

    this.employeeService.addEmployee(this.newEmployee).subscribe(
      (_response: Employee) => {
        // Show success alert
        this.isSuccess = true;

        // Render the employee list after adding a new employee
        this.employeeListComponent.getEmployees();
      },
      (error: HttpErrorResponse) => {
        console.log(error.message);
      }
    );
  }
}

目标

在上面的表单中，如果没有选择部门 *，则<select>元素 * 上会显示“You must pick a department”消息。
我还需要使 * 的形式 * 无效，直到和除非一个部门被选中。
为此，我已：

public validateDepartment(form: NgForm) {
   if (this.deptno == -1) {
    form.invalid;
   } 
}

我也试过这个（也失败了）：

public validateDepartment(form: NgForm) {
   if (this.deptno != -1) {
    form.valid;
   } 
}

问题的说明如下：

常见问题

1.我做错了什么？
1.或者，如何在默认情况下选择性别？