角度反應形式將隱藏字段傳遞給組件？

Question

當我選擇下拉作業時，它會按預期隱藏所有客戶端表單。 當我將字段傳遞給組件時，它仍在傳遞客戶端字段，此處實現錯誤。

主文件

<form class="needs-validation" novalidate [formGroup]="form" (ngSubmit)="saveClient()">
  <div class="form-row">
    <div class="col-md-6 mb-3">
        <label for="selectedOption">Client/Jobs</label>
        <select class="form-control" formControlName="selectedOption" [(ngModel)]="selectedValue">
          <option *ngFor="let o of this.dropdownOptions">
             {{o.val}}
          </option>
       </select>
     </div>  
  </div>
  <!-- CLient Form-->
  <div class="form-row" *ngIf="selectedValue !== 'Jobs'">
    <div class="col-md-6 mb-3">
      <label for="validationCustomClientName">Client Name</label>
      <input type="text" class="form-control" formControlName="clientName" placeholder="Client Name" value="">
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationCustomRName">Recruitment Agency</label>
      <input type="text" class="form-control" formControlName="agencyName" placeholder="Agency Name" value="" required>
    </div>
  </div>
  <!-- Jobs Form-->
  <div class="form-row" *ngIf="selectedValue == 'Jobs'">
    <div class="col-md-6 mb-3">
      <label for="validationCustomJobName">Job Title</label>
      <input type="text" class="form-control" formControlName="jobName" placeholder="Job Name" value="">
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationCustomSkills">Skills Required</label>
      <input type="text" class="form-control" formControlName="skills" placeholder="Skills" value="" required>
    </div>
  </div>

主文件

export class AddComponent implements OnInit {
  form: FormGroup;
  dropdownOptions = [];
  selectedValue: string = "";
  constructor(public fb: FormBuilder, private adminService: AdminService) {
    this.form = this.fb.group({
      clientName: [''],
      agencyName: [''],
      country: [''],
      selectedOption: [''],
      jobName: [''],
      skills:['']
    })
  }

控制台日志

clientName: "", agencyName: ""}

Answer 1

您不應在 HTML 文件中使用此關鍵字。

<select class="form-control" formControlName="selectedOption" [(ngModel)]="selectedValue">
          <option *ngFor="let o of dropdownOptions">
             {{o.val}}
          </option>
       </select>