Unable to validate optional FormControl in Reactive Forms

Question

I have a Reactive Form in my Angular project that looks like this:

<form [formGroup]="indirizzoForm" (ngSubmit)="indirizzoSubmit(stepper)">
          <h4>Indirizzo di consegna</h4>
          <hr />
          <div class="form-row">
            <div class="col-md-6 mb-3">
              <label
                >Nome <span class="text-muted">(sul campanello)</span></label
              >
              <input
                type="text"
                class="form-control"
                required
                formControlName="nome"
              />
            </div>
            <div class="col-md-6 mb-3">
              <label
                >Cognome <span class="text-muted">(sul campanello)</span></label
              >
              <input
                type="text"
                class="form-control"
                required
                formControlName="cognome"
              />
            </div>
          </div>
          <div class="form-group">
            <label>Indirizzo</label>
            <input
              type="text"
              class="form-control"
              required
              formControlName="indirizzo"
            />
          </div>
          <div class="form-group">
            <label
              >Informazioni aggiuntive
              <span class="text-muted">(facoltativo)</span></label
            >
            <input
              type="text"
              class="form-control"
              required
              formControlName="info"
            />
          </div>
          <div class="form-row">
            <div class="col-md-6 mb-3">
              <label>Cap</label>
              <input
                type="number"
                class="form-control"
                required
                formControlName="cap"
              />
            </div>
            <div class="col-md-6 mb-3">
              <label>Città</label>
              <input
                type="text"
                class="form-control"
                required
                formControlName="citta"
              />
            </div>
          </div>
          <div class="form-group">
            <label>Quando </label>
            <div class="form-check">
              <input
                class="form-check-input"
                type="radio"
                id="radioOra"
                value=""
                (click)="adesso()"
                [checked]="adessoCheck"
                name="quando"
              />
              <label class="form-check-label" for="radioOra">
                Adesso <span class="text-muted">(Arrivo tra 20-40 min)</span>
              </label>
            </div>
            <div class="form-check">
              <input
                class="form-check-input"
                type="radio"
                id="radioProgramma"
                value=""
                [checked]="programmaCheck"
                (click)="programma($event, programmaModal)"
                name="quando"
              />
              <label class="form-check-label" for="radioProgramma">
                Programma
              </label>
            </div>
          </div>

          <button
            type="submit"
            class="btn btn-primary"
            [disabled]="!indirizzoForm.valid"
          >
            Procedi
          </button>
          <p>{{ indirizzoForm.status }}</p>
        </form>

In the following form all controls are required instead of info that should be optional so if there is no data the form should be anyway submitted with info set as empty string.

My typescript code looks like this:

  indirizzoForm = new FormGroup({
    nome: new FormControl('', Validators.required),
    cognome: new FormControl('', Validators.required),
    indirizzo: new FormControl('', Validators.required),
    info: new FormControl(''),
    cap: new FormControl('', Validators.required),
    citta: new FormControl('', Validators.required),
    quando: new FormControl('', Validators.required)
  });

But even if no Validators is attached to info the form results invalid if info is empty...

Answer 1

Why did you add required in the info box, Info is an optional field right

 <div class="form-group">
        <label
          >Informazioni aggiuntive
          <span class="text-muted">(facoltativo)</span></label
        >
        <input
          type="text"
          class="form-control"
          required
          formControlName="info"
        />
      </div>

Please remove required from info field