Angular中如何将ngModel值传递给对象构造器？表单赋值异常

问题场景 #

开发Angular联系表单时，通过HTML的[(ngModel)]双向绑定收集用户输入的name、email、subject、message字段值，调试确认输入值已正确同步到组件对应属性，但调用Form类构造器创建contactForm对象时，该对象始终为空且属性未定义。后端接口经Postman测试正常，问题出在TypeScript的对象创建逻辑中。

相关代码 #

HTML模板 #

<section class="hero is-fullheight">
    <div class="hero-body">
    <div class="container has-text-centered">
        <p class="title">
            <a>Contact Form</a>
        </p>
        <p class="subtitle">
            <a>Do you have any question or concerns? fill out this form to contact us.</a>
        </p>
        </div>
        <div class="container has-text-left">

            <div class="tile">
                <div class="tile is-vertical is-12">
                    <div class="tile">
                        <div class="tile is-parent">
                            <article class="tile is-child notification is-link">
                                
                                <div class="field">
                                    <label class="label has-text-white">Name</label>
                                    <div class="control">
                                        <input class="input" type="text" [(ngModel)]="name" placeholder="First and Last Name" required>
                                    </div>
                                </div>
                                
                                <div class="field">
                                    <label class="label has-text-white">Email</label>
                                    <div class="control">
                                        <input class="input" type="text" [(ngModel)]="email" placeholder="example@gmail.com" required>
                                    </div>
                                </div>
                                
                                <div class="field">
                                    <label class="label has-text-white">Subject</label>
                                    <div class="control">
                                        <div class="select">
                                            <select [(ngModel)]="subject" required>
                                                <option>Select dropdown</option>
                                                <option>Order question</option>
                                                <option>Shipping question</option>
                                                <option>Other</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="field">
                                    <label class="label has-text-white">Message</label>
                                    <div class="control">
                                        <textarea class="textarea" type="text" [(ngModel)]="message" placeholder="Add your message here" required></textarea>
                                    </div>
                                </div>
                                
                                <div class="field">
                                    <div class="control">
                                        <label class="checkbox">
                                            <input type="checkbox">
                                            I agree to the <a href="#">terms and conditions</a>
                                        </label>
                                    </div>
                                </div>
                                <div class="field is-grouped">
                                    <div class="control">
                                        <button class="button is-link" (click)="submit()">Submit</button>
                                    </div>
                                    <div class="control">
                                        <button class="button is-link is-light">Cancel</button>
                                    </div>
                                </div>

                            </article>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

组件TypeScript文件 #

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import { FormService } from '../services/form.service';
import { Form } from './form';

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.css']
})
export class ContactComponent implements OnInit{

  name!: string;
  email!: string;
  subject!: string;
  message!: string;

  contactForm:Form = new Form(this.name, this.email, this.subject, this.message);

  constructor(private _snackbar: MatSnackBar, private formService: FormService, private http:HttpClient) { }

  ngOnInit(): void {
  }

  submit(){
    console.log(this.contactForm);
    this.formService.submitForm({form: this.contactForm});
  }
}

Form类文件 #

export class Form{
       constructor(
        name:String,
        email:String,
        subject:String,
        message:String
    ){}
}

问题原因 #

1. Form类构造器未赋值属性：当前Form类的构造器仅接收参数，但未将参数赋值给类的实例属性，导致创建的对象没有任何可访问的属性。
2. 对象初始化时机错误：组件初始化时，name、email等属性均为undefined，此时创建的contactForm对象基于这些初始值构建；后续用户输入更新组件属性时，已创建的contactForm对象不会自动同步更新。

解决方案 #

1. 修复Form类构造器 #

修改Form类，将构造器参数赋值给实例属性，有两种方式：

方式一：使用访问修饰符自动赋值

export class Form{
    constructor(
        public name: string,
        public email: string,
        public subject: string,
        public message: string
    ){}
}

方式二：手动赋值属性

export class Form{
    name: string;
    email: string;
    subject: string;
    message: string;

    constructor(
        name: string,
        email: string,
        subject: string,
        message: string
    ){
        this.name = name;
        this.email = email;
        this.subject = subject;
        this.message = message;
    }
}

2. 调整对象创建时机 #

移除组件中提前初始化contactForm的代码，在submit方法中使用当前最新的组件属性值动态创建Form对象：

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import { FormService } from '../services/form.service';
import { Form } from './form';

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.css']
})
export class ContactComponent implements OnInit{

  name!: string;
  email!: string;
  subject!: string;
  message!: string;

  constructor(private _snackbar: MatSnackBar, private formService: FormService, private http:HttpClient) { }

  ngOnInit(): void {
  }

  submit(){
    // 提交时用当前输入值创建Form对象
    const contactForm = new Form(this.name, this.email, this.subject, this.message);
    console.log(contactForm);
    this.formService.submitForm({form: contactForm});
  }
}

可选优化（进阶） #

如果需要更复杂的表单验证、状态管理或动态字段处理，推荐使用Angular响应式表单（Reactive Forms）替代ngModel，通过FormGroup和FormControl直接管理表单状态，避免手动同步属性的问题。

内容的提问来源于stack exchange，提问作者efg07