Angularjs 如何在“中创建从属下拉列表”；Mongodb"；？

我正在尝试创建一个国家、州和城市的相关下拉列表。其中，在我的注册表中会有不同的字段，如姓名、用户名、密码、国家、州和城市-此表单是Angular JS格式，在后端我使用Spring boot，数据库是mongo。所以我希望它的功能应该是-，当我选择国家时，相关的州会被填充，当我选择州时，相关的城市会被填充到城市字段中

package com.example.demo.model;

import java.time.LocalDateTime;
import java.util.Date;

import org.springframework.data.annotation.Id;
import org.springframework.data.mongodb.core.mapping.Document;

import com.fasterxml.jackson.annotation.JsonFormat;






@Document(collection="user")
public class user
{
       @Id
       //private String Id;
       private String username;
       private String name;
       private String password;
       private String confirmpassword;
       private String emailid;
       private String companyname;
       @JsonFormat(shape=JsonFormat.Shape.STRING, pattern="dd-MM-yyyy")
       private Date DOB;
       
  
  
public String getName() {
    return name;
     }
public void setName(String name) {
    this.name = name;
} 
public String getUsername() {
    return username;
}
public void setUsername(String username) {
    this.username = username;
}
public String getPassword() {
    return password;
}
public void setPassword(String password) {
    this.password = password;
}
public String getConfirmpassword() {
    return confirmpassword;
}
public void setConfirmpassword(String confirmpassword) {
    this.confirmpassword = confirmpassword;
}
public String getEmailid() {
    return emailid;
}
public void setEmailid(String emailid) {
    this.emailid = emailid;
}
public String getCompanyname() {
    return companyname;
}
public void setCompanyname(String companyname) {
    this.companyname = companyname;
}
public Date getDOB() {
    return DOB;
}
public void setDOB(Date DOB) {
    DOB = DOB;
}
@Override
public String toString() {
    return "user [name=" + name + ", username=" + username + ", password=" + password + ", confirmpassword="
            + confirmpassword + ", emailid=" + emailid + ", companyname=" + companyname + ", DOB=" + DOB + "]";
}
public user toString(user u) {
    
    return null;
}

    
}

这是我的模型类，我想在其中添加国家、城市和州，并从数据库中访问数据

package com.example.demo.controller;

import java.util.Date;
import java.util.List;
import java.util.Optional;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import com.example.demo.model.user;
import com.example.demo.repository.Userrepo;


@CrossOrigin(origins = "*", allowedHeaders = "*")
@RestController
public class UserController 
{

    @Autowired
    private Userrepo repo;
    
    //@Autowired
    //private Userservice s;
    
    @PostMapping("/registration")
    public String registerUser(@RequestBody user u)
    {
        repo.save(u);
        return "User is added with username"+u.getUsername();
        
    }
    
    
    @GetMapping("/list")
    public List<user> getUser()
    {
        return repo.findAll();
    }
    
    
    @GetMapping(value="/list/{username}")
    public ResponseEntity<user> getUserbyusername(@PathVariable("username") String username) {
        return repo.findByUsername(username)
                .map(us -> ResponseEntity.ok().body(us))
                .orElse(ResponseEntity.notFound().build());
    }
    
    
     @PutMapping(value="/update/{username}")
        public ResponseEntity<user> updateuser(@PathVariable("username") String username,
                                                @RequestBody user u) {
            return repo.findByUsername(username)
                    .map(us -> {
                        us.setName(u.getName());
                        us.setPassword(u.getPassword());
                        us.setConfirmpassword(u.getConfirmpassword());
                        us.setEmailid(u.getEmailid());
                        us.setCompanyname(u.getCompanyname());
                        us.setDOB(u.getDOB());
                        user updateduser = repo.save(us);
                        return ResponseEntity.ok().body(updateduser);
                    }).orElse(ResponseEntity.notFound().build());
        }
    
}

package com.example.demo.controller；
导入java.util.Date；
导入java.util.List；
导入java.util.Optional；
导入org.springframework.beans.factory.annotation.Autowired；
导入org.springframework.http.ResponseEntity；
导入org.springframework.web.bind.annotation.CrossOrigin；
导入org.springframework.web.bind.annotation.GetMapping；
导入org.springframework.web.bind.annotation.PathVariable；
导入org.springframework.web.bind.annotation.PostMapping；
导入org.springframework.web.bind.annotation.PutMapping；
导入org.springframework.web.bind.annotation.RequestBody；
导入org.springframework.web.bind.annotation.RequestMapping；
导入org.springframework.web.bind.annotation.RequestParam；
导入org.springframework.web.bind.annotation.RestController；
导入com.example.demo.model.user；
导入com.example.demo.repository.Userrepo；
@交叉原点（原点=“*”，allowedHeaders=“*”）
@RestController
公共类用户控制器
{
@自动连线
私人回购；
//@自动连线
//私人用户服务；
@邮戳（“/注册”）
公共字符串注册器（@RequestBody user u）
{
回购保存（u）；
return“用户添加用户名”+u.getUsername（）；
}
@GetMapping（“/list”）
公共列表getUser（）
{
返回回购findAll（）；
}
@GetMapping（value=“/list/{username}”）
公共响应属性getUserbyusername（@PathVariable（“用户名”）字符串用户名）{
return repo.findByUsername（用户名）
.map（美国->ResponseEntity.ok（）.body（美国））
.orElse（ResponseEntity.notFound（）.build（））；
}
@PutMapping（value=“/update/{username}”）
public ResponseEntity updateuser（@PathVariable（“用户名”）字符串用户名，
@请求主体用户（u）{
return repo.findByUsername（用户名）
.map（美国->{
us.setName（u.getName（））；
us.setPassword（u.getPassword（））；
us.setConfirmpassword（u.getConfirmpassword（））；
us.setEmailid（u.getEmailid（））；
us.setCompanyname（u.getCompanyname（））；
us.setDOB（u.getDOB（））；
用户updateUser=repo.save（美国）；
返回ResponseEntity.ok（）.body（updateUser）；
}).orElse（ResponseEntity.notFound（）.build（））；
}
}

这是我的控制器类

<div class="container">
    <div class="row">
        <div class="col-md-6 offset-md-3">
            <form name="RegForm" (ngSubmit)="onSubmit()" #myForm="ngForm">
                <fieldset>
                    <legend class="text-center"> User Registration <span class="req"></span></legend>

                    <div class="form-group">
                        <label>Username: </label>
                        <input class="form-control" #username="ngModel" type="text" [(ngModel)]="user.username" name="username" id="txt" required
                            placeholder="Enter Your Username" />
                            <span *ngIf="username.invalid && username.touched" class="error">This field can't be empty</span>
                    </div>


                    <div class="form-group">
                        <label> Name: </label>
                        <input required type="text"  #name="ngModel" [(ngModel)]="user.name" name="name" id="name"
                            class="form-control" required vmaxlength="28" placeholder="Enter your fullname" />
                            <span *ngIf="name.invalid && name.touched" class="error">This field can't be empty</span>
                    </div>

                    
                    
                    <div ngModelGroup="PasswordGroup" [class.has-error]="confirmpassword.invalid && confirmpassword.touched && !confirmpassword.errors?.required">
                    <div class="form-group">
                        <label>Password: </label>
                        <input class="form-control" #password="ngModel" type="password" [(ngModel)]="user.password" name="password" id="txt" required  minlength = '2' maxlength="10" (input)="confirmpassword.control.updateValueAndValidity()" 
                            placeholder="Enter valid password" />
                            <span *ngIf="password.invalid && password.touched" class="error">This field can't be empty</span>
                    </div>

                    <div class="form-group">
                        <label>Confirm Password: </label>
                        <input class="form-control" #confirmpassword="ngModel" type="password" [(ngModel)]="user.confirmpassword" appConfirmEqualValidator="password" name="confirmpassword" id="txt" required  minlength = '2' maxlength="10"
                            placeholder="Confirm Password" />
                            <span class="error" *ngIf="confirmpassword.touched && confirmpassword.errors?.required">This field can't be empty</span>
                            <span class="error" *ngIf="confirmpassword.touched && !confirmpassword.errors?.required && confirmpassword.errors?.notEqual">Password and confirmpassword doesn't match!</span>
                    </div>
                    </div>

                    <div class="form-group" [class.has-error]="emailid.invalid && emailid.touched">
                        <label class="control-label">Email: </label>
                        <input class="form-control" required [email]="user.emailid!==''" #emailid="ngModel" type="text" [(ngModel)]="user.emailid" name="emailid" id="email" required
                            placeholder="Enter valid email address" />
                            <span class="error" *ngIf="emailid.errors?.required && emailid.touched" >Email is required</span>
                            <span class="error" *ngIf="emailid.errors?.email && emailid.touched">Email is invalid</span>
                   </div>

                    

                    <div class="form-group">
                        <label>Company Name: </label>
                        <input class="form-control" #companyname="ngModel" type="text" [(ngModel)]="user.companyname" name="companyname" id="txt" required
                            placeholder="Enter You Company's name" />
                            <span *ngIf="companyname.invalid && companyname.touched" class="error">This field can't be empty</span>
                        </div>

                    <div class="form-group">
                            <label> Date Of Birth : </label>
                            <input id="txt"  #DOB="ngModel" name="DOB" [(ngModel)]="user.DOB" type="date" class="form-control"   
                                placeholder="Enter  Date Of Birth" required />
                                <span *ngIf="DOB.invalid && DOB.touched" class="error">This field can't be empty</span>
                    </div>
                    
                    
                     
                    <div class="form-group">
                        <input class="btn btn-success" type="submit" name="submit_reg" [disabled]="!myForm.form.valid" value="Submit" (click)="register()">
                    </div>

                </fieldset>
            </form>
        </div>

    </div>
</div>

用户注册
用户名：
此字段不能为空
姓名：
此字段不能为空
密码：
此字段不能为空
确认密码：
此字段不能为空
密码和确认密码不匹配！
电邮：
电子邮件是必需的
电子邮件无效
公司名称：
此字段不能为空
出生日期：
此字段不能为空

这是我的用户注册，我想在其中添加这3个字段

请帮忙