Почему мой консольный журнал не распечатывает ввод из моей реактивной Angular формы?

Question

Я пишу некоторый код для обработки пользовательского ввода в реактивной форме.

Я бы хотел узнать, почему мой метод onSubmit() не распечатывает ввод, который я помещаю в форму после нажатия кнопки отправки. Я настроил другую реактивную форму в своем проекте, которая является контактной формой только с вводом текста. В этом компоненте у меня есть аналогичный onSubmit() метод с а console.log. Когда я нажимаю кнопку отправки в контактной форме, мой оператор console.log работает на этом совершенстве, и я вижу напечатанный ввод. В контактной форме у меня нет никаких флажков в отличие от формы отправки, поэтому мне интересно, почему я не могу увидеть напечатанные данные? Я настроил обе формы очень схожим образом.

Вот файлы машинописи и шаблонов:

TS:

import { Component, OnInit } from '@angular/core';
import { FormGroup, Validators, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-submission',
  templateUrl: './submission-form.component.html',
  styles: []
})
export class SubmissionFormComponent implements OnInit {
  submissionForm: FormGroup;
  formSubmitted = false; //Holds status of the form

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void { 
    this.createForm();
  }

  createForm(): void {
    this.submissionForm = this.fb.group({
      anonymous: [false],
      name: ['', [Validators.required, Validators.maxLength(50)]],
      alias: ['', [Validators.required, Validators.maxLength(50)]],
      contact: [false],
      email: ['', [Validators.required, Validators.email]],
      contentWarning: ['', [Validators.required]],
      message: ['', [Validators.required, Validators.minLength(10), Validators.maxLength(5000)]],
      agree: [false, [Validators.requiredTrue]]
    });
  }

  onSubmit() {
    this.formSubmitted = true; //Form has been submitted

    if (this.submissionForm.valid) {
      console.log('submissionForm', this.submissionForm.value); //Process the form
    }
  }

  //Getter methods
  get anonymous() { return this.submissionForm.get('anonymous') };
  get name() { return this.submissionForm.get('name') };
  get alias() { return this.submissionForm.get('alias') };
  get contact() { return this.submissionForm.get('contact') };
  get email() { return this.submissionForm.get('email') };
  get contentWarning() { return this.submissionForm.get('contentWarning') };
  get message() { return this.submissionForm.get('message') };
  get agree() { return this.submissionForm.get('agree') };
}

HTML:

<section class="section">
    <div class="columns is-centered">
        <div class="column is-four-fifths">
            <h1 class="title">Submission Form</h1>
            <p *ngIf="formSubmitted" [ngClass]=" 'success'">Submitted successfully</p>
            <form [formGroup]="submissionForm" (ngSubmit)="onSubmit()">
                <div class="field">
                    <!--Checkbox for remaining anonymous-->
                    <label class="checkbox">
                        <input type="checkbox" 
                        formControlName="anonymous">
                        Remain anonymous
                    </label>
                </div>

                <div class="field" [hidden]="!anonymous.value">
                    <!--Field for alias--> 
                    <input class="input"
                        type="text"
                        placeholder="Alias"
                        formControlName="alias"
                        [ngClass]="{'form-submitted': formSubmitted}">
                    <div class="help-is-danger" *ngIf="alias.invalid && !alias.pristine">Alias should be 50 characters or less.</div>
                </div>

                <div class="field" [hidden]="anonymous.value">
                    <!--Field for name--> 
                    <input  class="input"
                        type="text"
                        placeholder="Name"
                        formControlName="name"
                        [ngClass]="{'form-submitted': formSubmitted}">
                    <div class="help-is-danger" *ngIf="name.invalid && !name.pristine">Name should be 50 characters or less.</div>
                </div>

                <div class="field">
                    <!--Checkbox for being contacted-->
                    <label class="checkbox">
                        <input type="checkbox" formControlName="contact">
                        Contact me
                    </label>
                </div>

                <div class="field" [hidden]="!contact.value">
                    <!--Field for email-->
                    <input  class="input"
                        type="text"
                        placeholder="Email"
                        *ngIf="contact"
                        formControlName="email"
                        [ngClass]="{'form-submitted': formSubmitted}">
                    <div class="help-is-danger" *ngIf="email.invalid && !email.pristine">
                        <p *ngIf="email.errors.email">Valid email is required.</p>
                    </div>
                </div>

                <div class="field">
                    <!--Field for content warnings-->
                    <input  class="input"
                        type="text"
                        placeholder="Content warnings"
                        formControlName="name">
                    <div class="help-is-danger" *ngIf="contentWarning.invalid && !contentWarning.pristine">Content warnings are required.</div>
                </div>

                <div class="field">
                    <!--Text area for message-->
                    <textarea  class="textarea"
                        type="text"
                        placeholder="Your Submission"
                        formControlName="message">
                    </textarea>
                    <div class="help-is-danger" *ngIf="message.invalid && !message.pristine">
                        <p *ngIf="message.errors.minlength">Message is required and should be at least 10 characters.</p>
                    </div>
                </div>

                <div class="field">
                    <!--Checkbox for agree-->
                    <label class="checkbox">
                        <input type="checkbox" 
                            formControlName="agree">
                        Agree
                    </label>
                    <div class="help-is-danger" *ngIf="submissionForm.hasError('required', 'agree') && !agree.pristine">Must check 'Agree' in order to submit.</div>    
                </div>

                <!--Submit Button-->
                <button type="submit" [disabled]="!agree.valid && !submissionForm.valid">Submit</button> 
            </form>
        </div>
    </div>
</section>