Я практикую обработку форм с помощью Angular, и мне нравится использовать bootstrap, чтобы все выглядело красиво.По какой-то причине стили начальной загрузки применяются к остальной части формы, но отображаются только переключатели со стилем HTML по умолчанию.
Снимок экрана представления браузера
Я уже пытался возиться с тем, куда я помещаю имя класса, изменяя способ обертывания входных данных, но ничего не работает.Я должен отметить, что я следую учебному пособию онлайн, и мой код точно соответствует инструктору.Тем не менее, он появляется с красивым бутстрапом, синим и белым, а мой остается HTML серым и черным.Я хочу исправить это так, чтобы он отображался синим и белым, пожалуйста, воздержитесь от ответов, в которых говорится, что он "должен быть" серым и черным.
HTML
<form (ngSubmit)="onSubmit()" #f="ngForm">
<div
id="user-data"
ngModelGroup="userData"
#userData="ngModelGroup">
<div class="form-group">
<label for="username">Username</label>
<input
type="text"
id="username"
class="form-control"
ngModel
name="username"
required>
</div>
<div class="form-group">
<label for="email">Mail</label>
<input
type="email"
id="email"
class="form-control"
ngModel
name="email"
required
#email = "ngModel"
>
</div>
</div>
<div class="radio" *ngFor="let gender of genders">
<label>
<input
class="radio"
type="radio"
name="gender"
ngModel
[value]="gender">
{{gender}}
</label>
</div>
<button
class="btn btn-primary"
type="submit"
[disabled]="!f.valid"
>Submit</button>
</form>
TypeScript
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild('f') signupForm: NgForm;
defaultValue = 'teacher';
answer = '';
genders = ['male', 'female'];
}