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

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

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'."

export class ToDoMakerComponent implements OnInit {
    ngOnInit(): void {
        
    }
    toDoForm = new FormGroup({
        taskName: new FormControl<string>('',[Validators.required]),
        taskDate: new FormControl('',[Validators.required]),
        taskPriority: new FormControl('',[Validators.required])
    })
    toDoDetail: ToDoDetailType | undefined;
    onSubmit() {
        console.log(this.toDoForm.value);
        this.toDoDetail = this.toDoForm.value; //error raising line
    }
}
export interface ToDoDetailType {
    taskName: string,
    taskDate: string,
    taskPriority: string
}
英文:

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'."

export class ToDoMakerComponent implements OnInit{
    ngOnInit(): void {
        
    }
    toDoForm = new FormGroup({
        taskName : new FormControl&lt;string&gt;(&#39;&#39;,[Validators.required]),
        taskDate : new FormControl(&#39;&#39;,[Validators.required]),
        taskPriority : new FormControl(&#39;&#39;,[Validators.required])
    })
    toDoDetail:ToDoDetailType | undefined;
    onSubmit(){
        console.log(this.toDoForm.value);
        this.toDoDetail =  this.toDoForm.value //error raising line
    }

}
export interface ToDoDetailType{
    taskName: string,
    taskDate: string,
    taskPriority: string
}

答案1

得分: 2

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

这给我们带来了:

constructor(private fb: FormBuilder) {}

toDoForm = this.fb.nonNullable.group({ // 创建一个非空组
  taskName: ['' ,  [Validators.required]],
  taskDate: ['' , [Validators.required]],
  taskPriority: ['' , [Validators.required]],
});

onSubmit() {
  this.toDoDetail = this.toDoForm.getRawValue(); // 不是一个部分值
}
英文:

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 :

  constructor(private fb:FormBuilder) {}
  
  toDoForm = this.fb.nonNullable.group({ // create a non nullable group
    taskName: [&#39;&#39;,  [Validators.required]],
    taskDate: [&#39;&#39;, [Validators.required]],
    taskPriority: [&#39;&#39;, [Validators.required]],
  });

  onSubmit() {
    this.toDoDetail = this.toDoForm.getRawValue(); // Not a partial
  }

答案2

得分: 0

你也可以简单地这样做:

this.toDoDetail =  {
    taskName: this.toDoForm.value.taskName,
    taskDate: this.toDoForm.value.taskDate,
    taskPriority: this.toDoForm.value.taskPriority
} 
英文:

You can also simply do:

this.toDoDetail =  {
    taskName: this.toDoForm.value.taskName,
    taskDate: this.toDoForm.value.taskDate,
    taskPriority: this.toDoForm.value.taskPriority
} 

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

发表评论

匿名网友

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

确定