Exploring the implementation of if/else statements in Sass/HTML

Question

Exploring the implementation of if/else statements in Sass/HTML

I need assistance with customizing the appearance of a save button on my form. The button is currently disabled and appears in blue color, but I would like it to change to a different color until all fields within the form are completed. Even though it can't be clicked when disabled, I want the color to reflect the status of the form completion.

<div class="medium-6 columns" *ngIf="!isLoading else updateLoading">
          <button md-button class="saves" type="submit" (click)="onSave()" 
          [disabled]="!editCardForm.valid">Save</button>
</div>

.saves {
        height: 2.375rem;
        width: 5.375rem;
        border-radius: 1.1563rem;
        color: white;
        background-color: #00B8E6;
        margin-left: 0.2rem;
      }

css angular typescript sass

Answer 1

Answer №1

If you have fields within a form, you can implement form validation to achieve certain actions. Below is a demonstration of how this can be done.

form:valid .button {
  background : green;
}

        <form>
            <label for="username"><b>Username:</b></label>
            <input id="username" type="text" placeholder="Username" required/><br/>
            <label for="password"><b>Password:</b></label>
            <input id="password" type="password" placeholder="Password" required/><br/>
            <input class="button" type="submit" value="Login"/><br/>
        </form>

The button will turn green only when the input fields contain text as per the required attribute.

Answer 2

If you have fields within a form, you can implement form validation to achieve certain actions. Below is a demonstration of how this can be done.

form:valid .button {
  background : green;
}

        <form>
            <label for="username"><b>Username:</b></label>
            <input id="username" type="text" placeholder="Username" required/><br/>
            <label for="password"><b>Password:</b></label>
            <input id="password" type="password" placeholder="Password" required/><br/>
            <input class="button" type="submit" value="Login"/><br/>
        </form>

The button will turn green only when the input fields contain text as per the required attribute.

Answer 3

Answer №2

I needed to insert the button.

button.saves:disabled { 
          background-color: blue; 
}

Answer 4

I needed to insert the button.

button.saves:disabled { 
          background-color: blue; 
}

Exploring the implementation of if/else statements in Sass/HTML

Answer №1

Answer №2

Similar questions

Angular 2: Utilize the select event to fetch and return the selected item

Are optional parameters in TypeScript distinct from parameters that have the ability to be undefined?

javascript/AngularJS - make elements gradually disappear

What are the benefits of incorporating component A into component B as a regular practice?

Tips for creating a section that perfectly stretches to cover the entire view port in HTML

ag-Grid open-source server-side filtering

Arranging individual spans within a div using CSS for perfect alignment

Is it possible to create varied background shades in CSS3 without relying on images?

Creating sibling classes with tailwind using the map function

Fixed position of the element within a parent stacking context

Passing a reference to a react functional component (react.FC) results in a type error: The property ref is not recognized on the type 'IntrinsicAttributes & Props & { children: ReactNode}'

A guide to accessing the sibling of each selector with jQuery

What strategies can be employed to manage developer data input into components using ESLint?

Issue with the Navigation in CSS and jQuery

With jQuery's .text() method, it is possible to modify the first span's Bootstrap class, but not the

Angular 2 Error: Unable to access the property 'value' as it is undefined

The button in the flex container is not wide enough due to center alignment

Adding space around images in JavaFX

Creating manageable CSS styles for a wide variety of themes

Firefoxy can't seem to get through the navigation keys within an element that has a hidden