Formgroup не отображается внутри bootstrap карты

Question

У меня есть несколько сложный шаблон Angular HTML с двумя таблицами, которые должны содержать форму. Намерение состоит в том, чтобы эта форма отображалась в виде строки внизу каждой таблицы.

<div class="container">
    <h1 class="jumbotron">{{ dateString }}</h1>
    <div *ngFor="let item of day | async">
        <h6>On this day, you: </h6>
        <p><strong>Burned</strong> {{ item.caloriesBurned }} calories</p>
        <p><strong>Gained</strong> {{ item.caloriesGained }} calories</p>
        <div class="row">
            <div class="card col-sm-6">
                <div class="card-header"><span class="headers">Sessions</span>
                    <button type="button" class="btn btn-primary addBtns">New Activity</button>
                </div>
                <div class="card-body">
                    <table class="table">
                        <thead>
                            <tr>
                                <th scope="col">Activity</th>
                                <th scope="col">Calories Burned</th>
                                <th scope="col">Duration (Minutes)</th>
                            </tr>
                        </thead>
                        <tbody>
                            <ng-container *ngFor="let session of sessions | async; let i = index">
                                <tr>
                                    <td>{{ session.activity }}</td>
                                    <td>{{ session.caloriesBurned }}</td>
                                    <td>{{ session.duration }}</td>
                                </tr>
                            </ng-container>
                            <ng-container>
                                <tr>
                                    <form [formGroup]="activityForm" class="form-group"
                                        (ngSubmit)="onActivitySubmit(activityForm.values)">
                                        <div class="form-group">
                                            <td><label for="activity">Activity</label><input id="activity"
                                                    formControlName="activity" type="text" placeholder="Activity"
                                                    class="form-control"></td>
                                        </div>
                                        <div class="form-group">
                                            <td><label for="caloriesBurned">Calories Burned</label><input
                                                    id="caloriesBurned" formControlName="caloriesBurned" type="number"
                                                    placeholder="Calories Burned" class="form-control"></td>
                                        </div>
                                        <div class="form-group">
                                            <td><label for="duration">Duration</label><input id="duration"
                                                    formControlName="duration" type="number"
                                                    placeholder="Duration in minutes" class="form-control"></td>
                                        </div>
                                        <button type="submit" class="btn btn-success">Add</button>
                                    </form>
                                </tr>
                            </ng-container>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card col-sm-6">
                <div class="card-header"><span class="headers">Meals</span>
                    <button type="button" class="btn btn-primary addBtns">New Meal</button>
                </div>
                <div class="card-body">
                    <table class="table">
                        <thead>
                            <tr>
                                <th scope="col">Name</th>
                                <th scope="col">Calories Gained</th>
                            </tr>
                        </thead>
                        <tbody>
                            <ng-container *ngFor="let meal of meals | async">
                                <tr>
                                    <td>{{ meal.name }}</td>
                                    <td>{{ meal.calories }}</td>
                                </tr>
                            </ng-container>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<router-outlet></router-outlet>

Я хочу отобразить это activityForm внизу одной из этих таблиц, однако, когда я пытаюсь Запустите этот шаблон, он фактически не отображает форму. Глядя на это в инспекторе, остальная часть страницы в порядке, даже до содержания <tr>, но форма внутри инспектора отображается серым цветом. Каждый элемент существует и правильно отображается прямо в таблицу, которая существует внутри <tr>, но, похоже, просто не хочет отображать.

Когда я переместил форму за пределы тега <div class="card col-sm-6">, он отображается правильно и работает, как ожидалось. Я проверил CSS правила в форме и обнаружил следующее:

В этом разделе «Свойства блочной модели», похоже, есть display: none, которая, как я предполагаю, является проблемой, но когда я вручную добавляю другое правило display, новое правило не вступает в силу, но и не выделяется серым цветом даже с тегом !important.

Я не уверен, что мой файл .ts может быть связан с этим, но я все равно вставил соответствующие части:

export class DayDetailComponent implements OnInit {

  mealForm: FormGroup;
  activityForm: FormGroup;

  constructor(public builder: FormBuilder) { 
      this.mealForm = this.builder.group({
        name: '',
        calories: 0
      })
      this.activityForm = this.builder.group({
        activity: '',
        caloriesBurned: 0,
        duration: 0
      })
    }
}

Answer 1

Как уже упоминалось в моем комментарии, синтаксис вашей таблицы неправильный, вместо этого вы можете использовать следующее.

<form>
    <table>
        <tr>
            <td>
                <div class="form-group">
                    <label>placeholder</label>
                    <input/>
                </div>
            </td>
            <td>
                <div class="form-group">
                    <label>placeholder</label>
                    <input/>
                </div>
            </td>
       </tr>
    </table>
</form>