模型与 FormGroup 不兼容

Question

我是 Angular 新手，我使用模型进行了 API POST，但该模型与我的

FormGroup

不兼容，而且我不明白如何设置

FormGroup

。我想，我必须放置一些东西，以便变量不为空或未定义。

我的表格组：

NormaForm = new FormGroup({
  codSector: new FormControl<number>(0, [Validators.required]),
  numNorma: new FormControl<number>(0, [Validators.required]),
  denominacion: new FormControl('', [Validators.required]),
  sumilla: new FormControl('', [Validators.required]),
  contenido: new FormControl('', [Validators.required]),
  tipoNormaId: new FormControl<number>(0, [Validators.required]),
  fechaPublicacion: new FormControl('', [Validators.required]),
})

get codSector() { return this.NormaForm.get('codSector'); }
get numNorma() { return this.NormaForm.get('numNorma'); }
get denominacion() { return this.NormaForm.get('denominacion'); }
get sumilla() { return this.NormaForm.get('sumilla'); } 
get contenido() { return this.NormaForm.get('contenido'); } 
get tipoNormaId() { return this.NormaForm.get('tipoNormaId'); } 
get fechaPublicacion() { return this.NormaForm.get('fechaPublicacion'); } 

我的表格（有点长，所以我只放开头）：

<form [formGroup]="NormaForm" (ngSubmit)="onSubmit_crear_norma(this.NormaForm.value)">
  <div class="px-1 py-1 mb-3 wrap-horizontal-filter">
    <div  class="pb-1" fxLayout fxLayout.lt-md="column" fxLayoutGap="10px">

      <div fxFlex fxLayout="column" fxLayoutGap="10px">
        <div fxFlex="50%" fxLayout="row" fxLayout.lt-sm="column" fxLayoutAlign="center center" fxLayoutAlign.lt-sm="stretch" fxLayoutGap="10px">
          <label fxFlex="30%">Código de sector:</label>
          <input fxFlex type="number" class="form-control mb-2" formControlName="codSector"/>
        </div>

我的型号：

export interface NormaPost {
  "codSector": number,          
  "numNorma": number,             
  "denominacion": string,  
  "sumilla": string,        
  "contenido": string,       
  "tipoNormaId": number,          
  "fechaPublicacion": Date
}

API函数：

onSubmit_crear_norma(normaPost:NormaPost): void {
      
  this.normaService.postNorma(normaPost).subscribe(resp=>{
    this.nueva_norma = resp;
    console.log(this.nueva_norma)
  }, err => {
    this.toastr.error("Error desconocido");
  });
}

Visual Studio Code 中的图像错误：

“Partial<{ codSector: number | null; numNorma: number | null; denominacion: string | null; sumilla: string | null; contenido: string | null; tipoNormaId: number | null; fechaPublicacion: string | null; }>”类型的参数不可分配给以下参数 输入“NormaPost”。属性“codSector”的类型不兼容。 输入“数字|”空 | undefined' 不可分配给类型'number'。 类型“未定义”不可分配给类型“数字”.ngtsc(2345) modal-norma-creacion.component.ts(11, 60): 错误发生在 组件 ModalNormaCreacionComponent 的模板。

Answer 1

从 Angular 14 开始，引入了严格的表单类型，

如果要将表单组中的所有表单控件实现为不可空：

1. 从依赖注入中获取

   NonullableFormBuilder

   服务。

2. 使用

   NormaForm

   服务创建

   NonullableFormBuilder

   表单组实例。

constructor(private fb: NonNullableFormBuilder) {}

NormaForm! = FormGroup;

ngOnInit() {
  this.NormaForm = this.fb.group({
    codSector: [0, { validators: [Validators.required] }],
    numNorma: [0, [Validators.required]],
    denominacion: ['', [Validators.required]],
    sumilla: ['', [Validators.required]],
    contenido: ['', [Validators.required]],
    tipoNormaId: [0, [Validators.required]],
    fechaPublicacion: [new Date(), [Validators.required]],
  });
}

3. 嗯，您不需要从视图中传递

   NormaForm.value

   ，因为您可以在组件中获取它。

<form [formGroup]="NormaForm" (ngSubmit)="onSubmit_crear_norma()">

  ...

</form>

4. 在

   onSubmit_crear_norma

   方法中，获取

   this.NormaForm.value

   并将其转换为

   NormaPost

   类型。

onSubmit_crear_norma(): void {
      
    this.normaService.postNorma(this.NormaForm.value as NormaPost).subscribe(resp=>{
      this.nueva_norma = resp;
      console.log(this.nueva_norma)
    }, err => {
      this.toastr.error("Error desconocido");
  });
}

演示@StackBlitz