Angular中能否实现输入属性的条件必填？

这个需求可以实现，但你当前的写法行不通——Angular的@Input装饰器的required配置只能接收静态值（比如字面量、静态类成员），无法直接引用组件实例的name属性。原因很简单：装饰器是在类定义阶段执行的，此时组件实例还未创建，根本访问不到实例级的属性。

下面是两种可行的实现方式：

方法1：初始化/变更钩子中做运行时校验 #

利用ngOnInit或ngOnChanges钩子，在组件初始化或输入属性变化时，检查当name存在时surname是否被传入：

import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-example',
  template: '<p>Name: {{name}}, Surname: {{surname}}</p>'
})
export class ExampleComponent implements OnInit, OnChanges {
  @Input() name?: string; 
  @Input() surname?: string;

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

  ngOnChanges(changes: SimpleChanges): void {
    // 当name或surname变化时重新校验
    if (changes['name'] || changes['surname']) {
      this.checkConditionalRequired();
    }
  }

  private checkConditionalRequired(): void {
    if (this.name && !this.surname) {
      throw new Error('传入name时，surname为必填项');
    }
  }
}

方法2：用Setter实时校验 #

给surname设置Setter，每次赋值时结合name的状态做校验：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-example',
  template: '<p>Name: {{name}}, Surname: {{_surname}}</p>'
})
export class ExampleComponent {
  @Input() name?: string; 

  private _surname?: string;
  @Input() set surname(value: string | undefined) {
    if (this.name && !value) {
      throw new Error('传入name时，surname为必填项');
    }
    this._surname = value;
  }
  get surname(): string | undefined {
    return this._surname;
  }
}

额外说明 #

• Angular的编译时输入校验（也就是@Input({ required: true })这种写法）不支持条件判断，只能通过运行时逻辑来实现这种依赖型必填规则。
• 如果不想抛出错误，而是在模板中显示友好提示，可以结合组件的状态变量，在模板里根据状态渲染提示信息。

内容的提问来源于stack exchange，提问作者Fabio Ferrari