首页 > 解决方案 > 如何准备好提交给后端团队的 Angular 表单

问题描述

我已经为用户注册制作了一个 UI,我不知道如何准备好提交给后端团队。我只知道有些服务应该添加到提交表单中。我怎样才能做到这一点。有人可以指导我一步一步的指导。

这是我制作的表格的代码:

        <div class="boformheading">
            <h2>Create Your Business Account</h2>
        </div>

        <div class="profile-photo">
            <div class="user-img-upload-box" type="file">
                <input type="file" id="mediaFile" />
                  <img id="user-pic" src="assets\img\user.png" class="rounded user-img" alt="User-Image">
                <div id="userimage" class="upload-user-img">
                    <img class="hu5pjgll lzf7d6o1" src="https://static.xx.fbcdn.net/rsrc.php/v3/y6/r/E8RzXXiIjaV.png" alt="" height="20" width="20">
                </div>
              </div>
        </div>

            <div class="row">
                <div class="col">
                  <input type="text" name="" class="form-control" formcontrolName="Business Name" placeholder="Business Name">
                </div>
                <div class="col">
                  <input type="text" class="form-control" placeholder="Business Email">
                </div>
            </div>

        <div class="form-group">
            <input type="text" class="form-control" id="business" placeholder="Business Industry">
        </div>
        <div class="row">
            <div class="col">
              <input type="text" class="form-control" placeholder="Contact Name">
            </div>
            <div class="col">
              <input type="text" class="form-control" placeholder="Contact Number">
            </div>
        </div>

        <div class="form-group">    
            <input type="text" class="form-control" id="DC" placeholder="Describe your company in 150 words "><br>
        </div>

        <div class="checkbox">
            <div>
              <p><b>As a Business Owner I Want To:</b></p>
              <input type="checkbox" id="Challenges" name="cat 1" value="Define a set of challenges">
              <label for="cred1">Define set of challenges</label><br>
              <input type="checkbox" id="Judge" name="cat 2" value="Judge">
              <label for="cred2">Judge Candidates............</label><br>
              <input type="checkbox" id="Mentor" name="cat 3" value="Mentor">
              <label for="cred3">Mentor Candidates.........</label><br>
              <input type="checkbox" id="Sponsor" name="cat 4" value="Sponsor">
              <label for="cred4">Sponsor Candidates........</label><br><br>
            </div>
        </div>

        <div>
        <label for="exampleInputEmail1"><b>Does Your Company Has A Website?</b></label><br>
            <input type="radio" id="Yes" name="gender" value="Yes">
            <label for="Yes">Yes</label>
            <input type="radio" id="No" name="gender" value="No">
            <label for="No">No</label>
        </div>

        <div class="form-group">
            <input type="text" class="form-control" id="cwebsite" placeholder="Enter Your Company`s  Website">
        </div>
        <div class="submit-button">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </form>
  </div>

标签: angularservicefrontendform-submit

解决方案


您需要侦听提交事件并根据事件在打字稿中调用提交方法。

Angular 对此有很好的文档,请参考以下链接 https://angular.io/start/start-forms


推荐阅读