提交表單時選擇下拉串列發送空值（Angular，ReactiveForm）-有解無憂

當我嘗試提交反應式表單時，選擇發送空值，而不是下拉串列中的值。我使用 Angular 12。我也嘗試使用 [ngValue] 作為選項標簽，它是一樣的。我附上了 html、打字稿組件和模塊。我為此使用了反應式形式，我在該組件的模塊中匯入了該模塊。我將不勝感激任何幫助。謝謝！

TYPESCRIPT COMPONENT

import { Component, OnInit } from '@angular/core';
  import { FormBuilder, FormGroup } from '@angular/forms';
  
  @Component({
  selector: 'app-post-a-job',
  templateUrl: './post-a-job.component.html',
  styleUrls: ['./post-a-job.component.scss']
})
export class PostAJobComponent implements OnInit {
  
  myForm: FormGroup;
 
 jobTypes = [{
    value: 'manager', view: 'Manager'
  }]
 
 constructor(private fb: FormBuilder) { }
 
 ngOnInit(): void {
    this.buildForm();
  }

  buildForm() {
    return this.myForm = this.fb.group({
      jobType: null
    });
  }
 save(form) {
    console.log(JSON.stringify(form.value));
  }
   }

MODULE

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { JobsRoutingModule } from './jobs-routing.module';
import { JobsComponent } from './jobs.component';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { PostAJobComponent } from './components/post-a-job/post-a-job.component';


@NgModule({
  declarations: [
    JobsComponent,
    PostAJobComponent
  ],
  imports: [
    CommonModule,
    JobsRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule
  ]
})
export class JobsModule { }

HTML

<form [formGroup]="myForm">
 <select formControlName="jobType">
            <option [value]="null">(new customer)</option>
            <option [value]="job.value" *ngFor="let job of jobTypes">
                {{job.view}}
            </option>
</select>
 <button type="submit" (click)="save(myForm)" class="btn btn-default">Submit</button>
</form>

uj5u.com熱心網友回復：

剛剛把你的代碼復制到專案中，沒有問題，不知道你的問題是什么

我發現了兩個驗證問題

  myForm!: FormGroup;

  save(form:any) {
    console.log(JSON.stringify(form.value));
  }
```

uj5u.com熱心網友回復：

即使我沒有發現您的代碼有任何問題，但您可以嘗試通過禁用占位符來防止錯誤，例如：

<option [value]="null" disabled>(new customer)</option>

并驗證您的提交程序：

save(form) {
  let val = form.value
  if(!val.jobType)return
}

uj5u.com熱心網友回復：

問題是因為它在我的專案上安裝了一個包 jquery-nice-select。謝謝你們！

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/366398.html

標籤：有角的形式角反应形式

上一篇：用戶照片未在編輯中加載

下一篇：如何正確拆分時間序列資料以進行sklearn分類？