두 가지 조건으로 각진 버튼을 비활성화하시겠습니까?

두 가지 조건으로 각진 버튼을 비활성화하시겠습니까?

이게 각도로 가능한가요?

<button type="submit" [disabled]="!validate && !SAForm.valid">Add</button>

두 조건이 모두 사실이면 버튼이 활성화될 것으로 예상합니다.

위의 코드를 이미 사용해 보았지만 생각대로 되지 않습니다.

대신 수술이 필요한 것 같습니다.

<button type="submit" [disabled]="!validate || !SAForm.valid">Add</button>

이렇게 하면 유효하지 않거나 SAForm.valid가 아닌 경우 버튼이 비활성화됩니다.

다른 대답에 덧붙여 이 추론은 드 모르간의 법칙으로도 알려져 있음을 지적하고자 합니다.이것은 사실 프로그래밍보다는 수학에 관한 것이지만, 모든 프로그래머들이 알아야 할 매우 기본적인 것입니다.

당신의 문제는 이렇게 시작되었습니다.

enabled  = A and B
disabled = not ( A and B )

지금까지는 괜찮았는데, 한 걸음 더 나아가 교정기를 제거하려고 하셨잖아요.그리고 그건 좀 까다롭네요, 왜냐면 당신이 그 일을 대신해야 하니까요.and/&&의 소리와 함께or/||.

not ( A and B ) = not(A) OR not(B)

또는 더 수학적인 표기법으로:

저는 조건을 단순화하거나 확률을 가지고 일할 때마다 이 법칙을 항상 염두에 둡니다.

component.ts에서 변수를 선언하고 일부 값으로 초기화합니다.

 buttonDisabled: boolean;

  ngOnInit() {
    this.buttonDisabled = false;
  }

이제 .html 또는 템플릿에 다음 코드를 넣을 수 있습니다.

<button disabled="{{buttonDisabled}}"> Click Me </button>

이제 값을 변경하여 버튼을 활성화/비활성화할 수 있습니다.buttonDisabled변수.

나는 ternary 연산자를 사용하지만, 만약form.valid사실입니다.Ej:

<button mat-button color="primary" [disabled]="((formUser.valid==true) && (formColaborador.valid==true))? false:true" (click)="addClick()">Crear</button>

각도 2에서 가능한가요?

네, 가능합니다.

두 조건이 모두 맞는 경우 버튼이 활성화됩니까?

아니요, 만약 그들이 참이면 버튼은 비활성화됩니다.disabled="true".

위의 코드를 시도해 보았지만 잘 작동하지 않습니다.

무엇을 기대하셨나요?다음의 경우 버튼이 비활성화됩니다.valid거짓이고 각도입니다.formGroup,SAForm유효하지 않습니다.

여기도 권장 사항입니다. 양식 전체가 제출될 수도 있고 사용해야 할 수도 있기 때문에 유형 버튼의 버튼을 제출하지 않도록 해주세요.invalidate그리고 들어보세요(ngSubmit).

구성요소에 정의된 조건부 매개변수에 따라 양식에서 버튼 및 기타 요소를 비활성화할 수 있습니다.예를 들어,

구성요소(typescript)에서 부울 필드를 정의합니다.

isTheElementDisabled: boolean;

요소 특성으로 템플릿에서:

[disabled]="isTheElementDisabled"

비활성화된 버튼에는 연산자를 수행할 수 있는 옵션이 전혀 없고 || (또는)을 수행할 수 있는 옵션만 있으며 &"와 동일하게 작동한다는 것을 알게 되었습니다.

ternary 연산자를 사용하는 것은 다음과 같이 가능합니다.[disabled] 작동에 내부적으로 true 또는 false가 필요합니다.

<button type="button" 
  [disabled]="(testVariable1 != 0 || testVariable2!=0)? true:false"
  mat-button>Button</button>

언급URL : https://stackoverflow.com/questions/43534347/disable-button-in-angular-with-two-conditions