Добавить связанный блок выбора для регистрации формы

Question

У меня есть форма регистрации, и я хочу добавить 2 связанных поля выбора в форму, связанный код блока выбора работает отдельно, но когда я пытаюсь добавить его в форму, он не отображается. Я попытался добавить код в div под паролем block, но у меня не получилось

РЕДАКТИРОВАТЬ: поэтому мы выяснили, что проблема не в коде, а в том, что я делать неправильно с Angular. когда я открываю проект (в коде Visual Studio), который включает html, TS, CSS, поле выбора не будет отображаться. когда мы попытались запустить его не как проект angular и без TS, окно выбора действительно появилось. Может ли кто-нибудь помочь мне?

Это поле выбора связано:

<script>
var sel1 = document.querySelector('#sel1');
var sel2 = document.querySelector('#sel2');
var options2 = sel2.querySelectorAll('option');

function giveSelection(selValue) {
  sel2.innerHTML = '';
  for(var i = 0; i < options2.length; i++) {
    if(options2[i].dataset.option === selValue) {
      sel2.appendChild(options2[i]);
    }
  }
}

giveSelection(sel1.value);
</script>

<select id="sel1" onchange="giveSelection(this.value)">
  <option value="a">a</option>
  <option value="b">b</option>
</select>
<select id="sel2">
  <option data-option="a">apple</option>
  <option data-option="a">airplane</option>
  <option data-option="b">banana</option>
  <option data-option="b">book</option>
</select>

И это основная форма регистрации:

<div class="container">
    <div class="row">
        <div class="col s10 offset-s1" id="panel">
            <div class="progress" *ngIf="showSpinner">
                <div class="indeterminate"></div>
            </div>
            <h3 id="title">Sign Up</h3>
            <div id="errorMsg" *ngIf="errorMessage">
                <span>{{errorMessage}}</span>
            </div>
            <form class="col s12" [formGroup]="signupForm" novalidate (ngSubmit)="signupUser()">
                <div class="row">
                    <div class="input-field col s12">
                        <input id="user_name" type="text" formControlName="username" autocomplete="off">
                        <label for="user_name">Username</label>
                        <span class="error" *ngIf="!signupForm.controls['username'].valid && signupForm.controls['username'].touched">
                            Username is required
                        </span>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <input id="email" type="email" formControlName="email" autocomplete="off">
                        <label for="email">Email</label>
                        <span class="error" *ngIf="!signupForm.controls['email'].valid && signupForm.controls['email'].touched">
                            Email is required
                        </span>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <input id="pass-word" type="password" formControlName="password">
                        <label for="pass-word">Password</label>
                        <span class="error" *ngIf="!signupForm.controls['password'].valid && signupForm.controls['password'].touched">
                            Password is required
                        </span>
                    </div>
                </div>







                <button class="btn waves-effect" id="signupbtn" [disabled]="!signupForm.valid">
                    Sign Up
                </button>
            </form>

        </div>
    </div>
</div>

Надеюсь получить помощь с этим

Answer 1

Я добавил ваши связанные поля выбора в форму под паролем. Работает нормально. Какие конкретно c проблемы или возраст сообщения об ошибке вы получаете?

Обновление: добавлено css. Это не вызывает проблемы. Попробуйте отключить файл TS и посмотрите, работает ли код

var sel1 = document.querySelector('#sel1');
var sel2 = document.querySelector('#sel2');
var options2 = sel2.querySelectorAll('option');

function giveSelection(selValue) {
  sel2.innerHTML = '';
  for(var i = 0; i < options2.length; i++) {
    if(options2[i].dataset.option === selValue) {
      sel2.appendChild(options2[i]);
    }
  }
}

giveSelection(sel1.value);

#panel {
  background-color: #ffffff;
}
#signupbtn {
  float: right;
  margin-right: 10px;
  background-color: #64b5f6;
  font-weight: 500;
}
#title {
  background-color: #64b5f6;
  color: white;
  padding: 8px;
  margin-top: 0px;
  font-weight: 700;
  text-align: center;
}
form {
  padding: 0px;
  border-radius: 3px;
  box-sizing: border-box;
  margin: 0px 20px 0px 20px;
}
 
.error {
  color: red;
}
 
.indeterminate {
  background-color: #64b5f6 !important;
}
 
.input-field {
  margin-bottom: 0px !important;
  padding-bottom: 0px !important;
}
 
#errorMsg {
  background: #f6b2b5;
  width: 100%;
  height: 50px;
  text-align: center;
}
 
#errorMsg span {
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  position: relative;
  float: left;
  font-size: 15px;
}

<div class="container">
    <div class="row">
        <div class="col s10 offset-s1" id="panel">
            <div class="progress" *ngIf="showSpinner">
                <div class="indeterminate"></div>
            </div>
            <h3 id="title">Sign Up</h3>
            <div id="errorMsg" *ngIf="errorMessage">
                <span>{{errorMessage}}</span>
            </div>
            <form class="col s12" [formGroup]="signupForm" novalidate (ngSubmit)="signupUser()">
                <div class="row">
                    <div class="input-field col s12">
                        <input id="user_name" type="text" formControlName="username" autocomplete="off">
                        <label for="user_name">Username</label>
                        <span class="error" *ngIf="!signupForm.controls['username'].valid && signupForm.controls['username'].touched">
                            Username is required
                        </span>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <input id="email" type="email" formControlName="email" autocomplete="off">
                        <label for="email">Email</label>
                        <span class="error" *ngIf="!signupForm.controls['email'].valid && signupForm.controls['email'].touched">
                            Email is required
                        </span>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <input id="pass-word" type="password" formControlName="password">
                        <label for="pass-word">Password</label>
                        <span class="error" *ngIf="!signupForm.controls['password'].valid && signupForm.controls['password'].touched">
                            Password is required
                        </span>
                    </div>
                </div>
                <div>
                    <select id="sel1" onchange="giveSelection(this.value)">
                       <option value="a">a</option>
                       <option value="b">b</option>
                    </select>
                    <select id="sel2">
                       <option data-option="a">apple</option>
                       <option data-option="a">airplane</option>
                       <option data-option="b">banana</option>
                       <option data-option="b">book</option>
                    </select>
                </div>







                <button class="btn waves-effect" id="signupbtn" [disabled]="!signupForm.valid">
                    Sign Up
                </button>
            </form>

        </div>
    </div>
</div>