突然,我的html开始在Angular项目上表现得很奇怪

时间:2017-02-04 20:23:33

标签: javascript html angularjs

当我意识到我的输入(复选框和文件)是文本而不是它们应该是什么时,我编写了一个signUp页面。我开始撤消事情以查看搞砸了什么,并且在某些时候,当我删除一个简单的输入时,错误就消失了。我正在调查此输入中可能导致问题的原因,但随后错误返回而没有输入。控制台中没有错误或任何错误。

有没有人有类似的错误?

enter image description here

area_x字段应为复选框,底部输入应为type = file。

HTML:

<ng-form name="FormCadastro" enctype="multipart/form-data">
    <div class="row ng-cloak">
        <h2>Informação pessoal</h2>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label>{{ 'NAME' | translate }}</label>
                    <input type="text" class="form-control capitalized" ng-disabled="c.nome" ng-model="newUser.nome" name="nome" maxlength="255" required />
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label>{{ 'BIRTH_DATE' | translate }}</label>
                    <input type="text" placeholder="dd/mm/yyyy" class="form-control data-mask" ng-disabled="c.dataNascimento" ng-model="newUser.dataNascimento" name="dataNascimento" required/>
                    <!-- ng-required='!firefox && !safari' -->
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6" ng-hide="c.token">
                <div class="form-group">
                    <label>{{ 'PASSWORD' | translate }}</label>
                    <input type="password" class="form-control" ng-model="newUser.senha" name="senha" minlength="6" required />
                </div>
            </div>
            <div class="col-sm-6" ng-hide="c.token">
                <div class="form-group">
                    <label>{{ 'PASSWORD_CONFIRMATION' | translate }}</label>
                    <input type="password" class="form-control" ng-model="newUser.confirmaSenha" name="confirmaSenha" minlength="6" match="senha" stopccp required />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label>{{ 'EMAIL' | translate }}</label>
                    <input type="email" class="form-control" ng-disabled="c.email" ng-model="newUser.email" name="email" maxlength="100" required />
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label>{{ 'EMAIL_CONFIRMATION' | translate }}</label>
                    <input type="email" class="form-control" ng-disabled="c.email" ng-model="newUser.confirmaEmail" name="confirmaEmail" maxlength="100" stopccp required />
                </div>
            </div>
        </div>
        <hr>
        <h2>Endereço</h2>
        <!-- address-line1 input-->
        <div class="row ">
            <div class="col-sm-12 form-group ">
                <label>Endereço</label>
                <input class="form-control " id="address-line1 " name="address-line1 " type="text " ng-model="newUser.address1" placeholder="Endereço ">
            </div>
        </div>
        <!-- address-line2 input-->
        <div class="row ">
            <div class="col-sm-6 form-group ">
                <label>Complemento</label>
                <div>
                    <input class="form-control " id="address-line2 " name="address-line2 " ng-model="newUser.address2 " type="text " placeholder="Numero xx ">
                </div>
            </div>
            <!-- city input-->
            <div class="col-sm-6 form-group ">
                <label>Cidade</label>
                <div>
                    <input class="form-control " id="city " ng-model="newUser.city " name="city " type="text " placeholder="Cidade ">
                </div>
            </div>
        </div>
        <!-- region input-->
        <div class="row ">
            <div class="col-sm-6 form-group ">
                <label>Estado</label>
                <div>
                    <input class="form-control " id="state " ng-model="newUser.state " name="state " type="text " placeholder="Estado ">
                </div>
            </div>
            <!-- postal-code input-->
            <div class="col-sm-6 form-group ">
                <label>CEP</label>
                <div>
                    <input class="form-control " ng-model="newUser.zipCode " id="postal-code " name="postal-code " type="text " placeholder="CEP ">
                </div>
            </div>
        </div>
        <hr>
        <div ng-if="!isCompany ">
            <h2>Educação</h2>
            <div class="row ">
                <div class="col-sm-12 form-group ">
                    <label>Escola</label>
                    <input type="text " placeholder="Escola Estadual Profesor ... " class="form-control " ng-model="newUser.school ">
                </div>
            </div>
            <div class="row ">
                <div class="col-sm-12 ">
                    <h4>Áreas de interesse</h4>
                    <div class="checkbox ">
                        <label>
                            <input ng-model="newUser.checkbox.value1 " type="checkbox " value="area_1 " checked=" ">Area 1
                        </label>
                    </div>
                    <div class="checkbox ">
                        <label>
                            <input ng-model="newUser.checkbox.value2 " type="checkbox " value="area_2 "> Area 2
                        </label>
                    </div>
                    <div class="checkbox ">
                        <label>
                            <input ng-model="newUser.checkbox.value3 " type="checkbox " value="area_3 "> Area 3
                        </label>
                    </div>
                </div>
            </div>
            <hr>
        </div>
        <div ng-if="isCompany ">
            <h2>Quantidade de vagas disponíveis</h2>
            <p class="help-block">Pode ser alterado depois na página de edição</p>
            <div class="row ">
                <div class="col-sm-12 ">
                    <h4>Áreas de interesse</h4>
                    <div class="form-group ">
                        <label>
                            Area 1
                            <input class="form-control " ng-model="newUser.interest_area_1 " type="text " value="0 " checked=" ">
                        </label>
                    </div>
                    <div class="form-group ">
                        <label>
                            Area 2
                            <input class="form-control " ng-model="newUser.interest_area_2 " type="text " value="0 ">
                        </label>
                    </div>
                    <div class="form-group ">
                        <label>
                            Area 3
                            <input class="form-control " ng-model="newUser.interest_area_3 " type="text " value="0 ">
                        </label>
                    </div>
                </div>
            </div>
            <hr>
        </div>
        <div class="row ">
            <div class="col-sm-offset-1 col-md-offset-1 col-sm-10 col-md-10 col-xs-12 ">
                <div class="form-group hidden-overflow ">
                    <label>{{ 'DROP_PICTURES' | translate }}</label>
                    <input type="file " id="fileInput " />
                </div>
                <div class="cropArea ">
                    <img-crop image="newUser.myImage " area-type="square " result-image="newUser.myCroppedImage "></img-crop>
                </div>
            </div>
        </div>
        <div class="row ">
            <div class="col-sm-offset-1 col-md-offset-1 col-sm-10 col-md-10 col-xs-12 ">
                <div ng-controller="modalController ">
                    <div class="help-block " translate="REGISTER-TERMS-MESSAGE " translate-compile></div>
                </div>
                <button type="submit " class="btn btn-success btn-block " ng-click="enviar_primeiro_form() ">{{ 'NEXT' | translate }}</button>
                <p>
                    <div class="spinner " ng-show="loading "></div>
                </p>
            </div>
        </div>
    </div>
</ng-form>

1 个答案:

答案 0 :(得分:1)

在输入类型中有空格会混淆浏览器

<div>
  Working Check Box
  <input type="checkbox">
</div>
<div>
  not a check box
  <input type="checkbox ">
</div>