代码之家  ›  专栏  ›  技术社区  ›  ryy77

提交表单时选择下拉发送null(Angular、Reactive form)

  •  0
  • ryy77  · 技术社区  · 4 年前

    当我尝试提交一个反应表单时,选择sendnull,而不是下拉列表中的值。我使用Angular 12。我也尝试了选项标记的[ngValue],结果是一样的。我附加了html、typescript组件和模块。我使用了反应形式,我在该组件的模块中导入了该模块。我将感谢任何帮助。非常感谢。

    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>
    0 回复  |  直到 4 年前
        1
  •  1
  •   vueAng    4 年前

    刚把你的代码复制到项目中,没有问题,我想知道你的问题是什么

    我发现了两个验证问题

      myForm!: FormGroup;
    
      save(form:any) {
        console.log(JSON.stringify(form.value));
      }
    ```
    
        2
  •  1
  •   Abu Zubair    4 年前

    尽管我没有从你的代码中看到任何错误,但你可以尝试通过禁用占位符来防止错误,比如:

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

    并验证您的提交过程:

    save(form) {
      let val = form.value
      if(!val.jobType)return
    }
    
        3
  •  0
  •   ryy77    4 年前

    问题是因为它在我的项目上安装了一个包jquery nice select。谢谢大家!