英文:
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<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
}
答案1
得分: 2
FormControl
默认创建一个可空控件,但您不能使用验证器创建一个nonNullable
控件。通常的替代方法是使用FormBuilder.nonNullable
。todoForm.value
返回一个Partial<ToDoDetailType>
,因为任何被禁用的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 anonNullable
with a validator. The common alternative is to use theFormBuilder.nonNullable
.todoForm.value
returns aPartial<ToDoDetailType >
because any disabledFormControl
won't be included in the value. If you're sure non control will be disabled the common alternative isgetRawValue()
.
Which gives us :
constructor(private fb:FormBuilder) {}
toDoForm = this.fb.nonNullable.group({ // create a non nullable group
taskName: ['', [Validators.required]],
taskDate: ['', [Validators.required]],
taskPriority: ['', [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
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论