Angular5禁用输入框值存入ngModel及Auth0注册后用户信息入库求助

其实禁用的输入框本身是可以和ngModel正常绑定的——只要你已经把初始值绑定到对应的变量上，哪怕输入框被禁用，ngModel关联的变量依然会保留那个值。不过我猜你大概率遇到的是禁用的输入框在表单提交时不会被包含进表单数据的问题？给你两个实用的解决思路：

• 用[readonly]替代disabled：这样输入框不能被编辑，但依然属于表单的可提交控件，ngModel能正常获取和保存值。示例代码：

  <input type="email" [(ngModel)]="userEmail" [readonly]="true" name="email">
  

• 如果必须用disabled：可以在提交表单的时候，手动把禁用输入框对应的ngModel值加入到提交数据里。比如在组件的提交方法中：

  onSubmit() {
    const submitData = {
      ...this.formValue, // 表单里其他可编辑字段的值
      email: this.userEmail // 手动加入禁用输入框绑定的邮箱值
    };
    // 后续把submitData发送到后端即可
  }
  

刚接触Angular5和Spring不用慌，这个需求拆解下来其实很清晰，我给你一步步捋明白：

前端（Angular5）部分 #

1. 构建用户信息表单：创建一个包含姓名、城市、电话等字段的表单，邮箱字段用readonly绑定你通过this.user拿到的Auth0邮箱（避免用户重复输入）。这里给你一个模板驱动表单的示例：

   <form #userForm="ngForm" (ngSubmit)="submitUserInfo(userForm.value)">
     <input type="email" [(ngModel)]="authEmail" name="email" [readonly]="true" placeholder="你的邮箱">
     <input type="text" [(ngModel)]="userName" name="name" required placeholder="姓名">
     <input type="text" [(ngModel)]="userCity" name="city" required placeholder="城市">
     <input type="tel" [(ngModel)]="userPhone" name="phone" required placeholder="电话">
     <button type="submit" [disabled]="!userForm.valid">提交信息</button>
   </form>
   

   在组件代码里初始化邮箱值：

   authEmail: string;
   userName: string;
   userCity: string;
   userPhone: string;
   
   ngOnInit() {
     // 从Auth0的user对象中获取邮箱并赋值
     this.authEmail = this.user.email;
   }
   

2. 封装HTTP请求服务：创建一个Angular服务，专门用来和Spring后端交互，发送用户信息。示例代码：

   import { Injectable } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   import { Observable } from 'rxjs';
   
   @Injectable({ providedIn: 'root' })
   export class UserService {
     // 替换成你的Spring后端API地址
     private apiBaseUrl = 'http://localhost:8080/api/users';
   
     constructor(private http: HttpClient) {}
   
     // 保存用户信息的POST请求方法
     saveUserDetails(userData: any): Observable<any> {
       return this.http.post(this.apiBaseUrl, userData);
     }
   }
   

3. 处理表单提交逻辑：在组件中注入上面的服务，调用提交方法并处理结果：

   constructor(private userService: UserService) {}
   
   submitUserInfo(formData: any) {
     // 合并表单数据和Auth0邮箱（如果用readonly，formData里已经包含邮箱，这步可省略）
     const fullUserData = { ...formData, email: this.authEmail };
   
     this.userService.saveUserDetails(fullUserData).subscribe({
       next: (response) => {
         alert('用户信息提交成功！');
         // 这里可以添加页面跳转或其他后续逻辑
       },
       error: (error) => {
         console.error('提交失败:', error);
         alert('提交失败，请稍后重试');
       }
     });
   }
   

后端（Spring）部分 #

1. 创建用户实体类：对应数据库表结构，包含所需字段（用Auth0邮箱作为主键避免重复）：

   import javax.persistence.Entity;
   import javax.persistence.Id;
   import javax.persistence.Table;
   
   @Entity
   @Table(name = "user_details")
   public class UserDetail {
       @Id
       private String email;
       private String name;
       private String city;
       private String phone;
   
       // 无参构造函数（JPA必需）
       public UserDetail() {}
   
       // 全参构造函数
       public UserDetail(String email, String name, String city, String phone) {
           this.email = email;
           this.name = name;
           this.city = city;
           this.phone = phone;
       }
   
       // Getter和Setter方法，这里省略，记得自己补上
   }
   

2. 创建Repository接口：用Spring Data JPA简化数据库操作：

   import org.springframework.data.jpa.repository.JpaRepository;
   
   public interface UserDetailRepository extends JpaRepository<UserDetail, String> {
       // 可以根据需求添加自定义查询方法，比如根据邮箱查询用户
   }
   

3. 编写Controller接口：接收Angular发送的POST请求，处理并保存数据：

   import org.springframework.http.HttpStatus;
   import org.springframework.http.ResponseEntity;
   import org.springframework.web.bind.annotation.PostMapping;
   import org.springframework.web.bind.annotation.RequestBody;
   import org.springframework.web.bind.annotation.RequestMapping;
   import org.springframework.web.bind.annotation.RestController;
   
   @RestController
   @RequestMapping("/api/users")
   public class UserDetailController {
       private final UserDetailRepository userDetailRepository;
   
       // 构造函数注入Repository
       public UserDetailController(UserDetailRepository userDetailRepository) {
           this.userDetailRepository = userDetailRepository;
       }
   
       @PostMapping
       public ResponseEntity<UserDetail> saveUserDetail(@RequestBody UserDetail userDetail) {
           UserDetail savedUser = userDetailRepository.save(userDetail);
           return new ResponseEntity<>(savedUser, HttpStatus.CREATED);
       }
   }
   

4. 配置跨域（CORS）：因为Angular和Spring通常运行在不同端口，需要允许跨域请求：

   import org.springframework.context.annotation.Configuration;
   import org.springframework.web.servlet.config.annotation.CorsRegistry;
   import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
   
   @Configuration
   public class CorsConfig implements WebMvcConfigurer {
       @Override
       public void addCorsMappings(CorsRegistry registry) {
           registry.addMapping("/api/**")
                   // 替换成你的Angular前端地址，比如http://localhost:4200
                   .allowedOrigins("http://localhost:4200")
                   .allowedMethods("GET", "POST", "PUT", "DELETE")
                   .allowedHeaders("*")
                   .allowCredentials(true);
       }
   }
   

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