Question

我正在尝试为类型文本的输入实现相同的CSS，类似于我们在CreateUser默认页面中的类型。因此，当您单击“用户名”文本框时，它下方会显示一条蓝线。同样我在我的页面上尝试它工作正常，但当我转到其他页面并再次访问此页面时，它不显示文本框下的蓝线。

创建-user.component

<div bsModal #createUserModal="bs-modal" class="modal fade" (onShown)="onShown()" tabindex="-1" role="dialog" aria-labelledby="createUserModal" aria-hidden="true" [config]="{backdrop: 'static'}">
    <div class="modal-dialog">

        <div #modalContent class="modal-content">

            <form *ngIf="active" #createUserForm="ngForm" id="frm_create_user" novalidate (ngSubmit)="save()">
                <div class="modal-header">
                    <button type="button" class="close" (click)="close()" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">
                        <span>{{l("CreateNewUser")}}</span>
                    </h4>
                </div>
                <div class="modal-body">

                    <ul class="nav nav-tabs tab-nav-right" role="tablist">
                        <li role="presentation" class="active"><a href="#user-details" data-toggle="tab">User Details</a></li>
                        <li role="presentation"><a href="#user-roles" data-toggle="tab">User Roles</a></li>
                    </ul>
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane animated fadeIn active" id="user-details">

                            <div class="row clearfix" style="margin-top:10px;">
                                <div class="col-sm-12">
                                    <div class="form-group form-float">
                                        <div class="form-line">
                                            <input id="username" type="text" name="UserName" [(ngModel)]="user.userName" required maxlength="32" minlength="2" class="validate form-control">
                                            <label for="username" class="form-label">{{l("UserName")}}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

的mypage.html

<div class="row clearfix" [@routerTransition]>
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="card main-content">
            <div class="row" style="background-color:white;">
                <div class="header">
                    <h2>
                        {{l('MyPage: ADD/EDIT')}}
                    </h2>
                </div>
                <br />
                <form *ngIf="active" #myForm="ngForm" id="frm_create_store" novalidate (ngSubmit)="onSubmitBtnClick(myForm)">
                    <div class="col-md-12">
                        <div class="form-group form-float">
                            <label for="myName" class="form-label">{{l("myName")}}</label>
                            <div class="form-line">
                                <input id="myName" type="text" name="myName" [(ngModel)]="name.myName" placeholder="{{l('EnterNAME')}}" required maxlength="32" class="validate form-control">
                            </div>
                        </div>
                    </div>

Answer 1

我认为你需要用form =＆＃34; myName＆＃34;标记。 div里面有class =＆＃34; form-line＆＃34;。

而不是;

<label for="myName" class="form-label">{{l("myName")}}</label>
<div class="form-line">
    <input id="myName" type="text" name="myName" [(ngModel)]="name.myName" placeholder="{{l('EnterNAME')}}" required maxlength="32" class="validate form-control">
</div>

试试这个;

<div class="form-line">
    <label for="myName" class="form-label">{{l("myName")}}</label>
    <input id="myName" type="text" name="myName" [(ngModel)]="name.myName" placeholder="{{l('EnterNAME')}}" required maxlength="32" class="validate form-control">
</div>

CSS无法在ASP.NET Boilerplate中使用

1 个答案: