title: Angular form is always returning invalid?
body: <p>I have an Angular reactive form with three checkboxes:</p>
  
  <ol>
  <li>The first checkbox is to see if the user would like to remain anonymous. If the user leaves this unchecked, then the name field remains. If checked, the name field is hidden.</li>
  <li>The second checkbox is to display an email field. If checked, then the email field appears. If it remains unchecked, the email field does not appear.</li>
  <li>The third checkbox is an 'Agree' checkbox. The user must select this in order to submit the form.</li>
  </ol>
  
  <p>My issue is that, even if all these requirements are met, the submission form is still invalid. I would like to see that my <code>submissionForm.valid</code> returns <code>true</code>. Here is my submission form component:</p>
  
  <p>EDIT: thanks to the answer in the comments, I see that all my fields are returning <code>null</code> values. Could anyone please help me fix this as well? I feel that I am initializing everything correctly but I am still confused as to why the values are returning as <code>null</code>.
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { FormGroup, Validators, FormBuilder } from '@angular/forms';
  
  @Component({
    selector: 'app-submission',
    templateUrl: './submission-form.component.html',
    styleUrls: [
      './submission-form.component.scss'
    ]
  })
  export class SubmissionFormComponent implements OnInit {
    submissionForm: FormGroup;
    formSubmitted = false; //Holds status of the form
  
    private nameValidators = [
      Validators.minLength(1),
      Validators.maxLength(50)
    ];
  
    private emailValidators = [
      Validators.maxLength(250),
      Validators.email
    ];
  
    constructor(private fb: FormBuilder) { }
  
    ngOnInit(): void { 
      this.createForm();
    }
  
    createForm(): void {
      this.submissionForm = this.fb.group({
        anonymous: [''],
        name: ['', this.nameValidators],
        contact: [''],
        email: ['', this.emailValidators],
        contentWarning: ['', [Validators.required]],
        title: ['', Validators.required],
        message: ['', [Validators.required, Validators.minLength(10), Validators.maxLength(10000)]],
        agree: [false, [Validators.requiredTrue]]
      });
    }
  
    onSubmit() {
      if (this.submissionForm.get('anonymous').value == false) {
        this.submissionForm.get('name').setValidators(this.nameValidators.concat(Validators.required));
      } else {
        this.submissionForm.get('name').setValidators(this.nameValidators);
      }
  
      if (this.submissionForm.get('contact').value == true) {
        this.submissionForm.get('email').setValidators(this.emailValidators.concat(Validators.required));
      } else {
        this.submissionForm.get('email').setValidators(this.emailValidators);
      }
  
      this.formSubmitted = true; //Form has been submitted
  
      console.log(this.submissionForm.valid);
  
      if (this.submissionForm.valid) {
        console.log('submissionForm', this.submissionForm.value); //Process the form
      }
    }
  
    get anonymous() { return this.submissionForm.get('anonymous') };
    get name() { return this.submissionForm.get('name') };
    get contact() { return this.submissionForm.get('contact') };
    get email() { return this.submissionForm.get('email') };
    get contentWarning() { return this.submissionForm.get('contentWarning') };
    get title() { return this.submissionForm.get('title') };
    get message() { return this.submissionForm.get('message') };
    get agree() { return this.submissionForm.get('agree') };
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is the accompanying template code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="section"&gt;
      &lt;div class="columns is-centered"&gt;
          &lt;div class="column is-four-fifths"&gt;
              &lt;h1 class="title"&gt;Submission Form&lt;/h1&gt;
              &lt;p class="success" *ngIf="formSubmitted"&gt;Submitted successfully&lt;/p&gt;
              &lt;form [formGroup]="submissionForm" (ngSubmit)="onSubmit()"&gt;
  
                  &lt;div class="field"&gt;
                      &lt;!--Checkbox for remaining anonymous--&gt;
                      &lt;label class="checkbox"&gt;
                          &lt;input type="checkbox" 
                          formControlName="anonymous"&gt;
                          Remain anonymous
                      &lt;/label&gt;
                  &lt;/div&gt;
  
                  &lt;div class="field" [hidden]="anonymous.value"&gt;
                      &lt;!--Checkbox for remaining anonymous--&gt;
                      &lt;input class="input"
                          type="text"
                          placeholder="Name"
                          formControlName="name"
                          [ngClass]="{'form-submitted': formSubmitted}"&gt;
                      &lt;div class="help-is-danger" *ngIf="name.invalid &amp;&amp; !name.pristine"&gt;Name should be 50 characters or less.&lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="field"&gt;
                      &lt;!--Checkbox for being contacted--&gt;
                      &lt;label class="checkbox"&gt;
                          &lt;input type="checkbox" formControlName="contact"&gt;
                          Contact me
                      &lt;/label&gt;
                  &lt;/div&gt;
  
                  &lt;div class="field" [hidden]="!contact.value"&gt;
                      &lt;!--Field for email--&gt;
                      &lt;input class="input"
                          type="text"
                          placeholder="Email"
                          formControlName="email"
                          [ngClass]="{'form-submitted': formSubmitted}"&gt;
                      &lt;div class="help-is-danger" *ngIf="email.invalid &amp;&amp; !email.pristine"&gt;
                          &lt;p *ngIf="email.errors.email"&gt;Valid email is required.&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="field"&gt;
                      &lt;!--Field for content warnings--&gt;
                      &lt;input  class="input"
                          type="text"
                          placeholder="Content warnings"
                          formControlName="name"
                          [ngClass]="{'form-submitted': formSubmitted}"&gt;
                      &lt;div class="help-is-danger" *ngIf="contentWarning.invalid &amp;&amp; !contentWarning.pristine"&gt;Content warnings are required.&lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="field"&gt;
                      &lt;!--Field for title--&gt; 
                      &lt;input  class="input"
                          type="text"
                          placeholder="Title"
                          formControlName="title"
                          [ngClass]="{'form-submitted': formSubmitted}"&gt;
                      &lt;div class="help-is-danger" *ngIf="title.invalid &amp;&amp; !title.pristine"&gt;Title is required.&lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="field"&gt;
                      &lt;!--Text area for message--&gt;
                      &lt;textarea  class="textarea"
                          type="text"
                          placeholder="Your Submission"
                          formControlName="message"&gt;
                      &lt;/textarea&gt;
                      &lt;div class="help-is-danger" *ngIf="message.invalid &amp;&amp; !message.pristine"&gt;
                          &lt;p *ngIf="message.errors.minlength"&gt;Message is required and should be at least 10 characters.&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="field"&gt;
                      &lt;!--Checkbox for agree--&gt;
                      &lt;label class="checkbox"&gt;
                          &lt;input type="checkbox" 
                              formControlName="agree"&gt;
                          Agree
                      &lt;/label&gt;
                      &lt;div class="help-is-danger" *ngIf="submissionForm.hasError('required', 'agree') &amp;&amp; !agree.pristine"&gt;Must check 'Agree' in order to submit.&lt;/div&gt; 
                  &lt;/div&gt;
  
                  &lt;!--Submit Button--&gt;
                  &lt;button type="submit" class="button is-danger is-outlined" [disabled]="!agree.valid &amp;&amp; !submissionForm.valid"&gt;Submit&lt;/button&gt; 
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am currently using Angular 9 and the Bulma framework. </p>