ngIf causes error: Conditional Expression requires all 3 expressions at the end of expression

I am attempting to write form control specific validation error messages in a form group. I have found several tutorials and examples online (such as this one) outlining a seemingly simple *ngIf div that shows an error message if errors are detected on the control.

The problem is that when I attempt to do this I recieve this strange error

NG5002: Parser Error: Conditional expression port?.errors?['required'] requires all 3 expressions at the end of the expression

I have several other *ngIf conditions on this page that work just fine. Here is my relevant code

                <form-field labelText="Port" [hasError]="port?.invalid && (port?.dirty || key?.touched)" [isRequired]="true">
                    <input id="port" formControlName="port" type="password">
                    <ul *ngIf="port?.invalid && (port?.touched || key?.dirty)">
                        <li *ngIf="port?.errors?['required']">Port is Required</li>
                        <li *ngIf="port?.errors?['pattern']">Invalid Port Number</li>
                    </ul>
                </form-field>

    ngOnInit() {
        this.store.dispatch(SettingsActions.enterMaintenance());
        this.detailsForm = new FormGroup({
            id: new FormControl(''),
            name: new FormControl('', Validators.required),
            productName: new FormControl('', Validators.required),
            number: new FormControl('', Validators.required),
            isSamlAuthRequired: new FormControl(Boolean),
            iAdapterSetting: new FormGroup({
                server: new FormControl('', Validators.required),
                port: new FormControl('', [Validators.required, Validators.pattern(this.regexValidPort)]),
                key: new FormControl('', Validators.required),
                headerVersion: new FormControl('', Validators.required),
                iAdapterInstitutionId: new FormControl('', Validators.required),
                isSSL: new FormControl(Boolean),
                tlsSecurityStrength: new FormControl(''),
            }),
        });
        this.setValue();
    }
    get port() {
        return this.detailsForm.get('iAdapterSetting.port');
    }

I tried to add an inline conditional alternative like this.

                <form-field labelText="Port" [hasError]="port?.invalid && (port?.dirty || port?.touched)">
                    <input id="Port" formControlName="port" type="text">
                    <ul *ngIf="port?.invalid && (port?.touched || port?.dirty)" class="rui-form-validation-errors">
                        <li *ngIf="port?.errors?['required']: false">Port is Required</li>
                        <li *ngIf="port?.errors?['pattern'] : false">Invalid Port Number</li>
                    </ul>
                </form-field>

This actually resolves the build error, But this seems incorrect and it should be unnecessary according to every example on the internet I can find. On top of that, they are still both evaluated to true together. The key doesn't seem to make a difference. If on of the conditions triggers then both messages show up and that is not the behavior I need.

Expression port?.errors?['required'] is not valid syntax in Typescript because property check operator is .? not just ?. You can't access optional property that way. Valid syntax is port?.errors?.['required'].