ocket8888 commented on code in PR #6753:
URL: https://github.com/apache/trafficcontrol/pull/6753#discussion_r878634838
##########
experimental/traffic-portal/src/app/core/servers/update-status/update-status.component.html:
##########
@@ -11,22 +11,20 @@
See the License for the specific language governing permissions and
limitations under the License.
-->
-<dialog open>
- <h2>Change status for {{serverName}}</h2>
- <hr/>
- <!-- method=dialog doesn't work in Firefox - even with the dialog
element enabled in about:config-->
- <!-- So we need to preventDefault on this event anyway -->
- <form ngNativeValidate (ngSubmit)="submit($event)" method="dialog">
- <label for="status">New Status</label>
- <select id="status" name="status" [formControl]="statusControl"
required>
- <option *ngFor="let status of statuses"
[ngValue]="status" [disabled]="status.id ===
currentStatus">{{status.name}}</option>
- </select>
- <label *ngIf="isOffline" for="offlineReason">Offline
Reason</label>
- <input [formControl]="offlineReasonControl" id="offlineReason"
name="offlineReason" *ngIf="isOffline" required maxlength="100"/>
- <div>
- <button mat-raised-button color="warn" type="button"
(click)="cancel()">Cancel</button>
- <button mat-raised-button>Submit</button>
- </div>
- </form>
-</dialog>
-<div class="backdrop"></div>
+<h2 mat-dialog-title>Change status for {{serverName}}</h2>
+<div mat-dialog-content>
+ <mat-form-field appearance="fill">
+ <mat-label for="status">New Status</mat-label>
+ <mat-select id="status" name="status" [(ngModel)]="status"
required>
+ <mat-option *ngFor="let status of statuses"
[value]="status" [disabled]="status.id ===
currentStatus">{{status.name}}</mat-option>
+ </mat-select>
+ </mat-form-field>
+ <mat-form-field *ngIf="isOffline" appearance="fill">
+ <mat-label for="offlineReason">Offline Reason</mat-label>
+ <input matInput [(ngModel)]="offlineReason" id="offlineReason"
name="offlineReason" required maxlength="100"/>
+ </mat-form-field>
+</div>
+<div mat-dialog-actions>
+ <button mat-raised-button disabled="{{status === null || isOffline &&
offlineReason === ''}}" (click)="submit()">Submit</button>
+ <button mat-raised-button color="warn" type="button"
(click)="cancel()">Cancel</button>
+</div>
Review Comment:
I hadn't thought of that. That's a bit tricky. I would've thought Material
would use a hidden input laid underneath the material select that reports
custom validity messages that mirror the select's validity, to fully implement
that. But then, Angular has a general disdain for native form validation in
general.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
