AngularJS, модальная форма начальной загрузки не может выглядеть правильно

ProgramBox

AngularJS, модальная форма начальной загрузки не может выглядеть правильно

Post author:admin
Запись опубликована:30 августа, 2022
Post category:Вопросы по программированию

#javascript #html #css #angularjs #twitter-bootstrap

#javascript #HTML #css #angularjs #twitter-bootstrap

Вопрос:

Когда я запускаю код, он работает, но я могу получить результат так, как я хочу. код здесь https://jsfiddle.net/RLQhh/6357 /

 <div class="modal fade" id="signup" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
    <div class="modal-content">
        <form name="registration" ngnovalidate="" class="ng-pristine ng-invalid ng-invalid-required ng-valid-pattern ng-valid-email ng-valid-minlength">
        <div class="modal-header ng-scope">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">amp;times;</span></button>
            <h4 class="modal-title" id="modal-title">Registration</h4>
        </div>
        <div class="modal-body ng-scope" id="modalbody">

            <div class="col-sm-offset-1 col-sm-10">
                <input type="text" name="username" id="username" placeholder="Username" ng-model="user.username" ng-required="true" ng-pattern="/^[a-zA-Z0-9]*$/" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern" required="required"><br>
                <p ng-show="registration.username.$touched amp;amp;amp;amp; registration.username.$error.required" class="ng-hide">Please enter a Username!</p>
                <p ng-show="registration.username.$error.pattern" class="ng-hide">Please enter a Valid Username (No special characters)!</p>


                <input type="email" name="email" id="email" placeholder="Email" ng-model="user.email" ng-required="true" ng-pattern="/^[^s@] @[^s@] .[^s@]{2,}$/" class="ng-pristine ng-untouched ng-empty ng-valid-email ng-invalid ng-invalid-required ng-valid-pattern" required="required"><br>
                <p ng-show="registration.email.$invalid amp;amp;amp;amp; registration.email.$touched" class="ng-hide">Please enter a valid email!</p>


                <input type="password" name="password1" id="password1" placeholder="Password" ng-model="user.password1" ng-required="true" ng-minlength="6" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-minlength" required="required"><br>
                <p ng-show="registration.password1.$invalid amp;amp;amp;amp; registration.password1.$touched" class="ng-hide">Passwords must be at least 6 characters!</p>

                <input type="password" name="password2" id="password2" placeholder="Confirm Password" ng-model="user.password2" ng-required="true" ng-minlength="6" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-minlength" required="required"><br>
                <p ng-show="registration.password2.$invalid amp;amp;amp;amp; registration.password2.$touched" class="ng-hide">Passwords must be at least 6 characters!</p>
            </div>




        </form>
        </div>
            <div class="modal-footer">
                <input type="submit" class="btn btn-primary" ng-click="submit(user)">
            </div>
    </div>
</div>

Я хочу, чтобы форма выглядела по центру и в правильном разделе нижнего колонтитула верхнего колонтитула. Вместо этого каждый раз, когда я меняю код или css, форма удаляется из тела, а нижний колонтитул становится удаленным. Я не уверен, связано ли это с тем, что я использую Bootstrap и angularjs или нет.

1. Здесь у вас есть столбец div: <div class="col-sm-offset-1 col-sm-10"> но вы не поместили его в строку div. Ознакомьтесь с документацией о том, как использовать сеточную систему Bootstrap здесь: getbootstrap.com/css/#grid-intro . Вы также можете посмотреть их CSS для форм: getbootstrap.com/css/#forms

2. Ничего не меняет в модальном

Ответ №1:

 <div class="modal fade" id="signup" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">

            <div class="modal-header ng-scope">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">amp;times;</span></button>
                <h4 class="modal-title" id="modal-title">Registration</h4>
            </div>
            <div class="modal-body ng-scope" id="modalbody">
                <form name="registration" ngnovalidate="" class="ng-pristine ng-invalid ng-invalid-required ng-valid-pattern ng-valid-email ng-valid-minlength">
                    <div class="col-sm-offset-1 col-sm-10">
                        <input type="text" name="username" id="username" placeholder="Username" ng-model="user.username" ng-required="true" ng-pattern="/^[a-zA-Z0-9]*$/" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern" required="required"><br>
                        <p ng-show="registration.username.$touched amp;amp;amp;amp; registration.username.$error.required" class="ng-hide">Please enter a Username!</p>
                        <p ng-show="registration.username.$error.pattern" class="ng-hide">Please enter a Valid Username (No special characters)!</p>


                        <input type="email" name="email" id="email" placeholder="Email" ng-model="user.email" ng-required="true" ng-pattern="/^[^s@] @[^s@] .[^s@]{2,}$/" class="ng-pristine ng-untouched ng-empty ng-valid-email ng-invalid ng-invalid-required ng-valid-pattern" required="required"><br>
                        <p ng-show="registration.email.$invalid amp;amp;amp;amp; registration.email.$touched" class="ng-hide">Please enter a valid email!</p>


                        <input type="password" name="password1" id="password1" placeholder="Password" ng-model="user.password1" ng-required="true" ng-minlength="6" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-minlength" required="required"><br>
                        <p ng-show="registration.password1.$invalid amp;amp;amp;amp; registration.password1.$touched" class="ng-hide">Passwords must be at least 6 characters!</p>

                        <input type="password" name="password2" id="password2" placeholder="Confirm Password" ng-model="user.password2" ng-required="true" ng-minlength="6" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-minlength" required="required"><br>
                        <p ng-show="registration.password2.$invalid amp;amp;amp;amp; registration.password2.$touched" class="ng-hide">Passwords must be at least 6 characters!</p>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <input type="submit" class="btn btn-primary" ng-click="submit(user)">
            </div>
        </div>
    </div>
</div>

Проверьте открывающие / закрывающие теги формы там.

Ответ №2:

Я немного изменил ваш код. Я думаю, что вы неправильно указали свой путь. Попробуй это:

 <div class="modal fade" id="signup" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">

            <div class="modal-header ng-scope">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">amp;times;</span></button>
                <h4 class="modal-title" id="modal-title">Registration</h4>
            </div>
            <div class="modal-body ng-scope" id="modalbody">
                <div class="row">
                    <form name="registration" ngnovalidate=""
                          class="ng-pristine ng-invalid ng-invalid-required ng-valid-pattern ng-valid-email ng-valid-minlength">
                        <div class="col-sm-offset-1 col-sm-10">
                            <input type="text" name="username" id="username" placeholder="Username"
                                   ng-model="user.username"
                                   ng-required="true" ng-pattern="/^[a-zA-Z0-9]*$/"
                                   class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern"
                                   required="required"><br>

                            <p ng-show="registration.username.$touched amp;amp;amp;amp; registration.username.$error.required"
                               class="ng-hide">Please enter a Username!</p>

                            <p ng-show="registration.username.$error.pattern" class="ng-hide">Please enter a Valid
                                Username
                                (No special characters)!</p>


                            <input type="email" name="email" id="email" placeholder="Email" ng-model="user.email"
                                   ng-required="true" ng-pattern="/^[^s@] @[^s@] .[^s@]{2,}$/"
                                   class="ng-pristine ng-untouched ng-empty ng-valid-email ng-invalid ng-invalid-required ng-valid-pattern"
                                   required="required"><br>

                            <p ng-show="registration.email.$invalid amp;amp;amp;amp; registration.email.$touched"
                               class="ng-hide">
                                Please enter a valid email!</p>


                            <input type="password" name="password1" id="password1" placeholder="Password"
                                   ng-model="user.password1" ng-required="true" ng-minlength="6"
                                   class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-minlength"
                                   required="required"><br>

                            <p ng-show="registration.password1.$invalid amp;amp;amp;amp; registration.password1.$touched"
                               class="ng-hide">Passwords must be at least 6 characters!</p>

                            <input type="password" name="password2" id="password2" placeholder="Confirm Password"
                                   ng-model="user.password2" ng-required="true" ng-minlength="6"
                                   class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-minlength"
                                   required="required"><br>

                            <p ng-show="registration.password2.$invalid amp;amp;amp;amp; registration.password2.$touched"
                               class="ng-hide">Passwords must be at least 6 characters!</p>
                        </div>

                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <input type="submit" class="btn btn-primary" ng-click="submit(user)">
            </div>
        </div>
    </div>
</div>

Надеюсь, это поможет вам…