Angular响应式表单在分配表单值时类型不匹配

huangapple
go评论81阅读模式
英文:

Angular reactive forms type mismatch on assigning the form values

问题

I am new to reactive forms,
I am trying to assign the form values (all string inputs) from my reactive form to a variable which has type of object of strings.
I get the following error

"Type 'Partial<{ taskName: string | null; taskDate: string | null; taskPriority: string | null; }>' is not assignable to type 'ToDoDetailType'.
Types of property 'taskName' are incompatible.
Type 'string | null | undefined' is not assignable to type 'string'.
Type 'undefined' is not assignable to type 'string'."

  1. export class ToDoMakerComponent implements OnInit {
  2.     ngOnInit(): void {
  3.         
  4.     }
  5.     toDoForm = new FormGroup({
  6.         taskName: new FormControl<string>('',[Validators.required]),
  7.         taskDate: new FormControl('',[Validators.required]),
  8.         taskPriority: new FormControl('',[Validators.required])
  9.     })
  10.     toDoDetail: ToDoDetailType | undefined;
  11.     onSubmit() {
  12.         console.log(this.toDoForm.value);
  13.         this.toDoDetail = this.toDoForm.value; //error raising line
  14.     }
  15. }
  1. export interface ToDoDetailType {
  2.     taskName: string,
  3.     taskDate: string,
  4.     taskPriority: string
  5. }
英文:

I am new to reactive forms,
I am trying to assign the form values (all string inputs) from my reactive form to a variable which has type of object of strings.
I get the following error

"Type 'Partial<{ taskName: string | null; taskDate: string | null; taskPriority: string | null; }>' is not assignable to type 'ToDoDetailType'.
Types of property 'taskName' are incompatible.
Type 'string | null | undefined' is not assignable to type 'string'.
Type 'undefined' is not assignable to type 'string'."

  1. export class ToDoMakerComponent implements OnInit{
  2.     ngOnInit(): void {
  3.         
  4.     }
  5.     toDoForm = new FormGroup({
  6.         taskName : new FormControl&lt;string&gt;(&#39;&#39;,[Validators.required]),
  7.         taskDate : new FormControl(&#39;&#39;,[Validators.required]),
  8.         taskPriority : new FormControl(&#39;&#39;,[Validators.required])
  9.     })
  10.     toDoDetail:ToDoDetailType | undefined;
  11.     onSubmit(){
  12.         console.log(this.toDoForm.value);
  13.         this.toDoDetail =  this.toDoForm.value //error raising line
  14.     }
  16. }
  1. export interface ToDoDetailType{
  2.     taskName: string,
  3.     taskDate: string,
  4.     taskPriority: string
  5. }

答案1

得分: 2

  • FormControl默认创建一个可空控件，但您不能使用验证器创建一个nonNullable控件。通常的替代方法是使用FormBuilder.nonNullable。
  • todoForm.value返回一个Partial&lt;ToDoDetailType&gt;，因为任何被禁用的FormControl都不会包含在值中。如果您确定非控件将被禁用，通常的替代方法是使用getRawValue()。

这给我们带来了：

  1. constructor(private fb: FormBuilder) {}
  3. toDoForm = this.fb.nonNullable.group({ // 创建一个非空组
  4.   taskName: ['' ,  [Validators.required]],
  5.   taskDate: ['' , [Validators.required]],
  6.   taskPriority: ['' , [Validators.required]],
  7. });
  9. onSubmit() {
  10.   this.toDoDetail = this.toDoForm.getRawValue(); // 不是一个部分值
  11. }
英文:

You have 2 problems here :

  • FormControl creates a nullable control by default but you can't create a nonNullable with a validator. The common alternative is to use the FormBuilder.nonNullable.
  • todoForm.value returns a Partial&lt;ToDoDetailType &gt; because any disabled FormControl won't be included in the value. If you're sure non control will be disabled the common alternative is getRawValue().

Which gives us :

  1.   constructor(private fb:FormBuilder) {}
  2.   
  3.   toDoForm = this.fb.nonNullable.group({ // create a non nullable group
  4.     taskName: [&#39;&#39;,  [Validators.required]],
  5.     taskDate: [&#39;&#39;, [Validators.required]],
  6.     taskPriority: [&#39;&#39;, [Validators.required]],
  7.   });
  9.   onSubmit() {
  10.     this.toDoDetail = this.toDoForm.getRawValue(); // Not a partial
  11.   }

答案2

得分: 0

你也可以简单地这样做：

  1. this.toDoDetail =  {
  2.     taskName: this.toDoForm.value.taskName,
  3.     taskDate: this.toDoForm.value.taskDate,
  4.     taskPriority: this.toDoForm.value.taskPriority
  5. }
英文:

You can also simply do:

  1. this.toDoDetail =  {
  2.     taskName: this.toDoForm.value.taskName,
  3.     taskDate: this.toDoForm.value.taskDate,
  4.     taskPriority: this.toDoForm.value.taskPriority
  5. }

huangapple
  • 本文由 发表于 2023年2月16日 17:39:33
  • 转载请务必保留本文链接：https://go.coder-hub.com/75470361.html
  • angular
  • angular-reactive-forms
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定