使用Angularjs

Question

我有一个使用$ http.post调用外部api的表单。但是，我现在需要为Address，City，State和Zip添加输入字段。然而地址的json是嵌套的，我已经尝试了一切来访问它但不能。 json现在看起来像这样。我现在需要将地址属性发布到我的表单。

{

"FirstName": "string",

"LastName": "string",

 "Address": {

    "Address1": "string",

    "Address2": "string",

    "City": "string",

    "PostalCode": "string",

    "Country": "string",

    "State": "string",
}

HTML代码：

<form novalidate="" role="form" name="prizeLogicForm" id="prizeForm" class="ng-pristine ng-invalid ng-invalid-required ng-valid-email">
            <h1 class="heading-sub-a-xl" style="margin-top: 20px; margin-bottom: 20px;">Entry Form</h1>

            <div class="form-group" ng-class="{'has-error' : prizeLogicForm.FirstName.$invalid &amp;&amp; prizeLogicForm.FirstName.$dirty}">
                <label for="FirstName" class="align-form required">First Name</label>
                <input type="text" class="form-control ng-pristine ng-invalid ng-invalid-required ng-touched" id="FirstName" name="FirstName" ng-model="FirstName" ng-required="true" required="required">
                <span class="help-block ng-hide" ng-show="prizeLogicForm.FirstName.$error.required &amp;&amp; prizeLogicForm.FirstName.$dirty">First Name is required.</span>
            </div>

            <div class="form-group" ng-class="{'has-error' : prizeLogicForm.LastName.$invalid &amp;&amp; prizeLogicForm.LastName.$dirty}">
                <label for="Lastname" class="align-form required">Last Name</label>
                <input type="text" class="form-control ng-pristine ng-untouched ng-invalid ng-invalid-required" id="LastName" name="LastName" ng-model="LastName" ng-required="true" required="required">
                <span class="help-block ng-hide" ng-show="prizeLogicForm.LastName.$error.required &amp;&amp; prizeLogicForm.LastName.$dirty">Last Name is required.</span>
            </div>


            <div class="form-group" ng-class="{'has-error' : prizeLogicForm.Address1.$invalid &amp;&amp; prizeLogicForm.Address1.$dirty}">
                <label for="Lastname" class="align-form required">Address</label>
                <input type="text" class="form-control ng-pristine ng-untouched ng-invalid ng-invalid-required" id="Address1" name="Address1" ng-model="Address1" ng-required="true" required="required">
                <span class="help-block ng-hide" ng-show="prizeLogicForm.Address1.$error.required &amp;&amp; prizeLogicForm.Address1.$dirty">Address is required.</span>
            </div>

            <div class="form-group" ng-class="{'has-error' : prizeLogicForm.City.$invalid &amp;&amp; prizeLogicForm.City.$dirty}">
                <label for="City" class="align-form required">City</label>
                <input type="text" class="form-control ng-pristine ng-untouched ng-invalid ng-invalid-required" id="City" name="City" ng-model="City" ng-required="true" required="required">
                <span class="help-block ng-hide" ng-show="prizeLogicForm.City.$error.required &amp;&amp; prizeLogicForm.City.$dirty">City is required.</span>
            </div>

            <div class="form-group" ng-class="{'has-error' : prizeLogicForm.State.$invalid &amp;&amp; prizeLogicForm.State.$dirty}">
                <label for="State" class="align-form required">State</label>
                <input type="text" class="form-control ng-pristine ng-untouched ng-invalid ng-invalid-required" id="State" name="State" ng-model="State" ng-required="true" required="required">
                <span class="help-block ng-hide" ng-show="prizeLogicForm.State.$error.required &amp;&amp; prizeLogicForm.State.$dirty">State is required.</span>
            </div>

            <div class="form-group" ng-class="{'has-error' : prizeLogicForm.Zip.$invalid &amp;&amp; prizeLogicForm.Zip.$dirty}">
                <label for="State" class="align-form required">Zip</label>
                <input type="text" class="form-control ng-pristine ng-untouched ng-invalid ng-invalid-required" id="Zip" name="Zip" ng-model="Zip" ng-required="true" required="required">
                <span class="help-block ng-hide" ng-show="prizeLogicForm.Zip.$error.required &amp;&amp; prizeLogicForm.Zip.$dirty">Zip is required.</span>
            </div>



            <div class="form-group" ng-class="{'has-error' : prizeLogicForm.Phone.$invalid &amp;&amp; prizeLogicForm.Phone.$dirty}">
                <label for="phone" class="align-form required">Phone</label>
                <input type="text" class="form-control ng-pristine ng-untouched ng-invalid ng-invalid-required" id="Phone" name="Phone" ng-model="Phone" ng-required="true" required="required">
                <span class="help-block ng-hide" ng-show="prizeLogicForm.Phone.$error.required &amp;&amp; prizeLogicForm.Phone.$dirty">Phone is required.</span>
            </div>

            <div class="form-group" ng-class="{'has-error' : prizeLogicForm.Email.$invalid &amp;&amp; prizeLogicForm.Email.$dirty}">
                <label for="email" class="align-form required">Email</label>
                <input type="email" class="form-control ng-pristine ng-untouched ng-valid-email ng-invalid ng-invalid-required" id="Email" name="Email" ng-model="Email" ng-required="true" required="required">
                <span class="help-block ng-hide" ng-show="prizeLogicForm.Email.$error.required &amp;&amp; prizeLogicForm.Email.$dirty">Email is required.</span>
            </div>

            <div class="checkbox">
                <label>
                    <input type="checkbox" ng-model="AgreeToRules" ng-required="true" class="align-form required ng-pristine ng-untouched ng-invalid ng-invalid-required" required="required"> <strong>I have read and agree to be bound by the Official Rules and am 21 years of age or older. <span style="color: #d13a17;">*</span></strong>
                </label>
            </div>
            <!--Remember to add newsletter option, its not added currently to the service.-->
            <div class="checkbox">
                <label>
                    <input type="checkbox" ng-model="OptIn" ng-required="false" class="ng-pristine ng-untouched ng-valid ng-valid-required"> I would like to receive the Texas Tourism email newsletter and I understand that I may <a href="http://traveltex.us4.list-manage1.com/unsubscribe?u=e573ec85eee8fb1a7e9b35f86&amp;id=592bc032c8" target="_blank">unsubscribe</a> at any time. See our <a href="https://www.traveltexas.com/privacy" target="_blank">Privacy Policy</a> for more details.
                </label>
            </div>

            <br>
            <br>
            <input type="submit" class="btn btn-primary" ng-disabled="prizeLogicForm.$invalid" value="Submit" ng-click="postdata(FirstName, LastName, AgreeToRules, OptIn, Phone, Email)" disabled="disabled"> <br><br>
            <!--<input type="button" class="btn btn-secondary btn-bottom" value="Submit" ng-disabled="!checked" data-ng-click="postdata(FirstName, LastName, AgreeToRules, OptIn, Phone, Email)" /> <br /><br />-->

        </form>

AngularJS

$scope.IsSuccessVisible = false;
    $scope.IsStatusVisible = false; // Hide form on init
    $scope.IsFormVisible = true; // Show form on init
    $scope.FirstName = null;
    $scope.LastName = null;
    $scope.Address1 = null;
    $scope.City = null;
    $scope.PostalCode = null;
    $scope.State = null;
    $scope.AgreeToRules = false;
    $scope.OptIn = false;
    $scope.Phone = null;
    $scope.Email = null;
    $scope.postdata = function (

        FirstName,
        LastName,
        Address1,
        City,
        PostalCode,
        State,
        AgreeToRules,
        OptIn,
        Phone,
        Email
        ) {
        var data = {
            FirstName: FirstName,
            LastName: LastName,
            Address1: Address1,
            City: City,
            PostalCode: PostalCode,
            State: State,
            AgreeToRules: AgreeToRules,
            OptIn: OptIn,
            Phone: Phone,
            Email: Email
        };
        //Call the services
      $http.post('externalAPIurlhere',

            JSON.stringify(data)).then(function (response) {

                console.log("Success Status: ", response.data);
                $scope.msg = response.data.UserGuid;

                $scope.IsFormVisible = false;  //Hide form
                $scope.IsSuccessVisible = true; //Show form



            }, function (response) {
                console.log("Failure Status: ", response.data);

                $scope.msg = response.data.Message;

                if ($scope.msg === 'Model is invalid') {
                    $scope.msg = 'Invalid phone number. Try Again!';
                    console.log('Message Updated');
                };
                $scope.statusval = response.status;
                $scope.statustext = response.statusText;
                $scope.headers = response.headers();
                $scope.IsFormVisible = false;  //Hide form
                $scope.IsStatusVisible = true; //Show form

            });

Answer 1

我意识到为了解决这个问题，我必须设置var data = {..} sections对象符号，就像JSON布局一样。这使我能够成功发布到Address1，City，PostalCode和State。但是$ scope.postdata函数代码需要引用所有子属性，如：

$scope.postdata = function (
        FirstName,
        LastName,
        AgreeToRules,
        OptIn,
        Phone,
        OtherOptIn,
        Email,
        **Address1**,
        **City**,
        **PostalCode**,
        **State**
        )

所以应该是这样的：

var data = {
            FirstName: FirstName,
            LastName: LastName,
            AgreeToRules: AgreeToRules,
            OptIn: OptIn,
            Phone: Phone,
            OtherOptIn: OtherOptIn,
            Email: Email,
            **Address**: {
                **Address1**: **Address1**,
                **City**: **City**,
                **PostalCode**: **PostalCode**,
                **State**: **State**
            }

我希望这可以帮助任何想要使用外部API发布到表单的人。