Question

当我选择下拉作业时，它会按预期隐藏所有客户端表单。当我将字段传递给组件时，它仍然传递客户端字段，此处实现错误。

main.html

<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>

main.ts

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 文件中使用 this 关键字。

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

角度反应形式将隐藏字段传递给组件？

1 个答案: