Angular中FormControl传值报错：string|null无法赋值给string参数

我有如下简单的输入框和按钮：

<label for="code">Join session: </label>
<input
  id="code"
  type="text"
  placeholder="Session code"
  [formControl]="code"
  maxlength="6"
><button
  [disabled]="code.invalid"
  (click)="joinSession(code.value)"
>Enter</button>

对应的组件代码如下：

export class JoinSessionComponent {
  public code = new FormControl('', [
    Validators.required,
    Validators.pattern("^[0-9]*$"),
    Validators.minLength(6),
  ])

  public joinSession(code: string) {
    console.log(code)
  }
}

出现的错误为：

Argument of type 'string | null' is not assignable to parameter of type 'string'.

这个错误由模板中的joinSession(code.value)代码导致。虽然我给FormControl配置了验证器，确保用户点击按钮时输入的是有效值，但仍触发了此类型错误。请问是否可以在模板中解决该问题，还是必须在控制器中使用FormControl来处理？

方式一：模板内直接处理 #

因为按钮已经通过code.invalid禁用，点击时code.value必然是符合要求的非空字符串，所以可以用两种方式处理：

• 非空断言：直接告诉TypeScript值不为null

<button
  [disabled]="code.invalid"
  (click)="joinSession(code.value!)"
>Enter</button>

• 空值合并兜底：写法更严谨，即使极端情况也不会传null

<button
  [disabled]="code.invalid"
  (click)="joinSession(code.value || '')"
>Enter</button>

方式二：控制器内处理 #

如果不想在模板里加断言，也可以在组件方法中处理：

• 修改参数类型并做非空判断

public joinSession(code: string | null) {
  if (code) {
    console.log(code);
  }
}

• 或者结合验证器逻辑直接断言

public joinSession(code: string | null) {
  console.log(code!);
}

• 初始化FormControl时指定类型，让类型推导更准确

public code = new FormControl<string>('', [
  Validators.required,
  Validators.pattern("^[0-9]*$"),
  Validators.minLength(6),
])

内容的提问来源于stack exchange，提问作者Peter Boomsma